Vue3 Electron Vite ElectronBuilder 客户端开发

Vue3 Electron Vite ElectronBuilder 客户端开发

使用 Electron + Vue3 开发客户端

创建 vue vite 项目

npm init vue@latest

根据提示输入和选择相应的配置

进入项目目录，安装依赖

cd {preject path}
yarn isntall

添加 electron 依赖

yarn add electron --dev

添加 vite-plugin-electron 依赖

yarn add vite-plugin-electron --dev

创建 electron 文件夹并添加 main.js 和 preload.js 文件

main.js

const { app, BrowserWindow } = require('electron');
const path = require('path')

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });
    win.maximize();
    // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
        // Load your file
        win.loadFile('dist/index.html');
    }
};

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

preload.js

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    // 能暴露的不仅仅是函数，我们还可以暴露变量
})

修改 vite.config.js

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        electron([
            {
                entry: 'electron/main.js',
            },
            {
                entry: 'electron/preload.js',
                onstart(options) {
                    //当预加载脚本构建完成时，通知渲染器进程重新加载页面，
                    //而不是重新启动整个Electron App。
                    options.reload()
                },
            }
        ]),
        vue()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

修改 package.json

注意不是 electron 文件夹，就是 dist-electron

添加 electron-builder

yarn add electron-builder --dev

在项目根目录创建 electron-builder.json5 文件

{
  "appId": "YourAppID",
  "asar": false,
  "directories": {
    "output": "release/${version}"
  },
  "files": [
    "dist",
    "dist-electron"
  ],
  "mac": {
    "artifactName": "${productName}_${version}.${ext}",
    "target": [
      "dmg"
    ]
  },
  "win": {
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64"
        ]
      }
    ],
    "artifactName": "${productName}_${version}.${ext}"
  },
  "nsis": {
    "oneClick": false,
    "perMachine": false,
    "allowToChangeInstallationDirectory": true,
    "deleteAppDataOnUninstall": false
  }
}

修改 vue 项目的路由模式为

mport { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(import.meta.env.BASE_URL),

启动项目

yarn run dev

构建打包

yarn run build

打包的文件位置在项目的 release 目录下