electron-vue3开发桌面应用（2） - 使用vite搭建electron

1、打开命令行工具，切换路劲到工作空间下，执行一下脚本，创建项目

yarn create vite electron-vue3 --template vue

脚本执行成功后，工作空间下会多一个名为electron-vue3的项目，进入到electron-vue3目录中

2、安装必要（常用）的依赖

# -D表示仅在开发中安装这些依赖
yarn add electron electron-builder concurrently cross-env vite wait-on -D

3、项目根目录下创建electron文件夹，electron文件夹下创建main.js

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

// 需要安装件 cross-env
const NODE_ENV = process.env.NODE_ENV;

function createWindow() {
    const win = new BrowserWindow({
        width: 1200,
        height: 700,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,                            // 设置为false，才能在渲染进程中使用electron api
        }
    });

     win.loadURL(
        NODE_ENV === "development" ? 
        `http://localhost:5173` :
        `file://${path.join(__dirname, "../dist/index.html")}`
    )
    if(NODE_ENV === "development") {
        win.webContents.openDevTools();
    }
}

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

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

4、package.json中添加启动electron的启动脚本和electron程序入口

# electron会等5173端口响应，再启动
"electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."   # 添加到 scripts 中

"main": "electron/main.js"			# 添加package.json根节点中

package.json完整配置如下

{
  "name": "electron-vue3",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "concurrently": "^8.2.0",
    "cross-env": "^7.0.3",
    "electron": "^25.3.0",
    "electron-builder": "^24.4.0",
    "vite": "^4.4.0",
    "wait-on": "^7.0.1"
  }
}

5、分别在两个终端中执行下面两个脚本，启动程序

npm run electron
npm run dev

弹出程序窗口，启动成功！！！！

6、但是每次启动需要执行两个脚本，太麻烦了，scripts中添加如下脚本，然后仅执行 electron:server 即可启动

{
  "name": "electron-vue3",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "electron:server": "concurrently -k \"yarn dev\" \"yarn electron\"",		# 启动执行这个脚本即可
    "electron:build": "vite build && electron-builder",							# 编译执行这个脚本即可
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."
  },
  "build": {
    "productName": "electron-yxln",
    "copyright": "Copyright C 2021 yxln",
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "concurrently": "^8.2.0",
    "cross-env": "^7.0.3",
    "electron": "^25.3.0",
    "electron-builder": "^24.4.0",
    "vite": "^4.4.0",
    "wait-on": "^7.0.1"
  }
}

7、打包：执行electron:build脚本，程序打包在 dist_electron 文件夹下，但是直接启动 win-unpacked 文件夹下的程序，程序窗口是弹出来了，但是未能正常打开页面，这样因为程序加载主页的路径错了，解决办法：vite.config.js中添加base

export default defineConfig({
  base: './',
  plugins: [vue()],
})