创建 Vue3 Electron Vite ElectronBuilder 客户端项目

创建 vue vite 项目

# 初始化项目
npm init vue@latest
cd {preject_name}
yarn install

# 添加 electron 依赖
yarn add electron --dev
# 添加 vite electron 插件依赖
yarn add vite-plugin-electron --dev

在项目中创建 electron 文件夹

mkdir electron

进入 electron 文件夹，创建 main.js 和 preload.js

cd electron
vi 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();
    }
});

vi preload.js

const { contextBridge } = require('electron')

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

返回项目根目录，修改 vite.config.js

cd ..
vi 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

修改 main 属性为 dist-electron/main.js

```shell

添加 electron-builder

yarn add electron-builder --dev

创建 electron-builder.json5 文件

vi 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
  }
}

修改路由模式

vi src/router/router.js

// history: createWebHistory(import.meta.env.BASE_URL),
history: createWebHashHistory(import.meta.env.BASE_URL),