项目背景
- 一个Electron+vue2的桌面应用项目，进行打包
- 使用了
vue-cli-plugin-electron-builder将Electron和vue结合
直接使用electron-builder打包
- 问题一：打包后，background.js中会出现模块引入报错。Electron是commonJs规范，但使用了ESM规范
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' - 问题二：大量文章都将build option写入
package.json，但是实际上需要写入vue.config.js中 - 问题三：当为了解决第一个问题，删去createProtocol的引入，会导致exe直接找不到index.html。如果规范模块化，使用type:'es'，会导致node的内置模块无法使用。
使用框架内置打包electron:build
由于github网络等问题，需要手动下载打包相关的资源 ：
-
electron-v8.2.0-win32-x64.zip
-
winCodeSign-2.6.0.7z
-
nsis-3.0.4.2.7z
-
nsis-resources-3.4.1.7z
相关安装步骤可看以下文章：https://blog.csdn.net/qq_32682301/article/details/105234408
打包build option配置
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
productName: "Barrage",
appId: "electron.app",
asar: false, //是否将源代码打包为asar.exe
nsis: {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, //是否允许修改安装目录
"installerIcon": "./src/assets/my2.ico",// 安装时图标
"uninstallerIcon": "./src/assets/my2.ico",//卸载时图标
"installerHeaderIcon": "./src/assets/my2.ico", // 安装时头部图标
"createDesktopShortcut": true, // 是否创建桌面图标
"createStartMenuShortcut": true,// 是否创建开始菜单图标
"shortcutName": "all-electron", // 快捷方式名称
"runAfterFinish": false,//是否安装完成后运行
},
win: {
target: 'nsis',
icon: './src/assets/my2.ico'
},
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/"
},
extends: null
}
}
},- 如果添加了
files和directories项，会导致出错
打包路径有中文
打包路径如果存在中文，会出现乱码情况
可参考以下文章进行配置https://blog.csdn.net/kyq0417/article/details/111266776
标签：vue,ico,遇坑,electron,Electron,true,打包 From： https://www.cnblogs.com/karle/p/17704801.html