vite +vue3 + electron项目集成

将现有的vite项目打包为electron，适用于已开发过一段时间的vite项目。如果是从零搭建vite+electron项目，推荐使用electron-vite-vue，可以直接创建已集成好electron的vite项目

1. 使用vite构建项目

装包启动

npm init vite@latest
npm install
npm run dev

2. 集成electron

装包

npm install electron vite-plugin-electron cross-env -D

安装失败使用淘宝镜像源

npm config set registry https://registry.npm.taobao.org/

创建electron的入口文件

在项目根目录创建electron/index.ts文件

import { app, BrowserWindow } from "electron";
import path from "path";

const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      // 允许渲染进程使用node
      contextIsolation: false,
      nodeIntegration: true,
    },
  });
  // app.isPackaged 字段存在bug，即使正常打包后，仍然为false，所以不能用来判断项目是否经过打包
  if (process.env.NODE_ENV === 'development') {
    // 开发环境
    // process.env.VITE_DEV_SERVER_URL获取开发服务器的url
    // vite版本不同，VITE_DEV_SERVER_URL字段也有所变化，打印process.env查找具体的名称
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
  } else {
    // 生产环境
    win.loadFile(path.join(__dirname, "../dist/index.html"));
  }
};

app.whenReady().then(createWindow)

配置vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      // 入口文件
      entry: 'electron/index.ts'
    })
  ]
})

配置环境变量

"scripts": {
  "dev": "cross-env NODE_ENV=development vite",
  "build": "vite build",
  "preview": "vite preview"
},

启动项目

会发现在项目的根目录下多出一个dist-electron文件夹，然后会出现报错弹框

npm run dev

配置package.json

type：electron使用的是commonjs的语法，所以type为module时，无法启动项目，修改type为commonjs；
main：指定入口文件

"type": "commonjs",
"main": "dist-electron/index.js",

启动项目

npm run dev

如果报Error: Cannot find module 'node:path'错误，检查node的版本，需要node16+

项目打包

文档

npm install electron-builder -D

打包配置

两种方式：根路径创建单独的配置文件；使用package.json中的build字段
默认先查找build字段，找不到才会到项目根路径查找配置文件
package.json

"build": {}

配置文件
支持多种文件类型选择，不同类型的文件除了书写格式不一样，其他配置的参数都按照文档提供的参数进行配置

electron-builder.yml
electron-builder.js
electron-builder.json

// electron-builder.json
{
  "appId": "com.electron.desktop",
  "productName": "electron",
  "asar": true,
  "copyright": "Copyright © 2022 electron",
  "directories": {
    "output": "release"
  },
  "files": [
    "dist",
    "dist-electron"
  ],
  "mac": {
    "artifactName": "${productName}_${version}.${ext}",
    "target": ["dmg"]
  },
  "win": {
    "target": ["nsis"]
  },
  "nsis": {
    "oneClick": false,
    "perMachine": false,
    "allowToChangeInstallationDirectory": true,
    "deleteAppDataOnUninstall": false,
    "artifactName": "${productName}_${version}.${ext}"
  },
  "publish": [
    {
      "provider": "generic",
      "url": "http://127.0.0.1:8080"
    }
  ],
  "releaseInfo": {
    "releaseNotes": "版本更新的具体内容"
  }
}

package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development vite",
  "build": "vue-tsc && vite build && electron-builder",
  "preview": "vite preview"
},

打包

npm run build

生成文件

electron_0.0.0.exe：程序的安装包
win-unpacked：通过exe进行安装后生成的文件，可以看作安装exe时将安装路径选择在当前文件夹下

双击运行 win-unpacked/electron.exe

下载报错：electron-builder会去github上下载一个zip压缩文件，由于网络环境问题，容易出现下载失败的情况。可通过科学上网进行下载，或手动下载压缩包，放到指定目录下即可

手动下载文件

从淘宝镜像中下载对应版本的压缩包，放到指定的缓存文件夹下面

macOS: ~/Library/Caches/electron
Linux: ~/.cache/electron
windows: %LOCALAPPDATA%\electron\cache

例如我的电脑对应的文件位置为

C:\Users\pc\AppData\Local\electron\Cache