VUE 项目通过electron-builder打包成桌面应用
前语：由于客户不希望记住地址，想把网站打包成桌面应用，可以直接打开。调研了一下，有2种比较常见工具，Pake和Electron，当然Electron名气大一点。
- Pake：试过，打包出来很小，命令cli就可以出结果，使用简单，但原理是利用了电脑本地浏览器，所以会有浏览器不兼容的运行情况
- Electron：将浏览器一起打包，即内嵌 Chromium，兼容器比较好，因此运行包也会比较大，大100M左右
说明：本步骤，只是纯粹将前端包打包成应用，不做开发调试，开发调试可以直接使用web，与原来前端开发一样
参考资料：
electron-builder官网文档：https://www.electron.build/
源码：https://github.com/electron-userland/electron-builder
打包步骤
前端代码，已经 build 在 dist-prod
安装依赖
先安装2个必备依赖，electron 和 electron-builder
pnpm install electron --save-dev
pnpm install electron-builder --save-dev创建配置文件
在前端代码根目录，创建一个文件夹electron，文件夹下面创建一个文件 main.js
js
// main.js
// 导入 Electron 模块、路径模块
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
// 声明主窗口变量
let mainWindow = null
// 隐藏菜单栏，按需修改
Menu.setApplicationMenu(null)
/**
* 创建主窗口
*/
function createWindow() {
// 创建 BrowserWindow 实例，并配置窗口属性
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
icon: path.join(__dirname, '../dist-prod/icon.ico'),
webPreferences: {
nodeIntegration: false, // 禁用 Node.js 集成
contextIsolation: true, // 启用上下文隔离
enableRemoteModule: false // 禁用远程模块
}
})
// 加载打包后的 HTML 文件
mainWindow
.loadFile(path.resolve(__dirname, '../dist-prod/index.html'))
.catch((err) => console.error('加载生产环境文件失败:', err))
}
// 单实例锁
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, commandLine, workingDirectory) => {
focusMainWindow()
})
// 当 Electron 初始化完成时创建窗口
app.whenReady().then(() => {
createWindow()
// macOS 上，当用户点击 dock 图标并且没有其他窗口打开时，重新创建一个窗口
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
}
// 当所有窗口关闭时退出应用
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
/**
* 聚焦主窗口
*/
function focusMainWindow() {
if (mainWindow) {
if (mainWindow.isMinimized()) mainWindow.restore()
mainWindow.focus()
mainWindow.show()
}
}在根目录下再创建一个文件 electron-builder.json5
json
{
appId: 'id.yourApp',
productName: 'your-app-name',
icon: './dist-prod/icon.ico',
files: ['./electron/main.js', './dist-prod'],
extraFiles: [
{
from: './dist-prod/icon.ico',
to: './'
}
],
directories: {
output: './release/${version}'
},
win: {
icon: './dist-prod/icon.ico',
target: ['nsis', 'zip', 'portable'],
asar: true,
extraResources: ['./dist-prod/icon.ico'],
requestedExecutionLevel: 'asInvoker'
},
appx: {
publisher: 'your name'
},
nsis: {
oneClick: false,
perMachine: false,
allowElevation: true,
allowToChangeInstallationDirectory: true,
createDesktopShortcut: true,
createStartMenuShortcut: true,
runAfterFinish: true,
shortcutName: 'your-app-name',
installerIcon: './dist-prod/icon.ico',
uninstallerIcon: './dist-prod/icon.ico'
}
}说明：
{
from: './dist-prod/icon.ico',
to: './'
}这个就是将./dist-prod/icon.ico 拷贝的win-unpacked文件夹下面，这时候exe文件就会自动加载这个icon，根据官网描述，exe图标会自动加载图标名字为 icon.ico或icon.png
target: ['nsis', 'zip', 'portable'], 这个是打包出来三个结果，nsis是安装包，双击即可按步骤安装到电脑，zip会把win-unpacked压缩成zip(有点类似绿色版)，portable是单独可执行文件（就一个文件，双击即可打开）
在 package.json 增加以下内容
json
{
"name": "your-app-name",
"version": "1.0.9",
"icon": "public/icon.ico",
"main": "electron/main.js",
"description": "应用中文名",
...
"scripts": {
"i": "pnpm install",
"dev": "vite --mode env.local",
"dev-server": "vite --mode dev",
"build:app": "electron-builder",
...
}
}其中几个关键的地方：
version：版本号，最后会一起打包出来的，并且生成目录是release/{version}。
在electron-builder.json5 已经配置了output: './release/${version}'
"main": "electron/main.js", 这个是指向了上面创建的文件，如果在其他地方创建了mian.js ，那么在这里指定即可
scripts增加一个脚本命令："build:app": "electron-builder",
后面可以直接使用：
npm run build:app打包结果
npm run build:app执行这个之后，会在release文件夹下面生成对应打包结果
踩坑
安装的过程，可能会遇到从github下载依赖，但可能网络问题下载不了，解决：
如果使用powershell，则可以先配置2个环境变量
$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
$env:ELECTRON_BUILDER_BINARIES_MIRROR="https://npmmirror.com/mirrors/electron-builder-binaries/"即让其从淘宝镜像下载
或者在前端代码根目录下，创健文件.npmrc
registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/至此，打包就完成了，更多的配置项，建议查阅官网