Electron-builder 打包配置项目中文名称和自动运行
网上翻阅后发现有人直接在 package.json 中这样添加 build:
"scripts": {
// ...
},
"build": {
"productName": "xxx",
"appId": "xxx",
// ...
},
这其实是个大坑,我尝试后发现会报错无效配置:
InvalidConfigurationError: 'build' in the application package.json
后面又查了下,大概是版本原因,electron-builder 某个版本之后的配置得写在 vue.config.js 中才能生效。但网上好多文章都是直接在 package.json 里面配置,还有在 electron 生成的 background.js 里配置的。
解决办法
eletron 打包总会出现莫名其妙的问题,图标缺失、路径错误。其实大多数的坑都是国内网络环境和自己的项目配置问题,这里就配置做一 下说明。需要在 vue.config.js 中对 electron-builder 进行配置(没 vue.config.js 的自己建一个就 ok 了),具体配 置如下:
module.exports = {
//判断开发模式还是生产模式
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
//插件配置
pluginOptions: {
//electronBuilder 配置
electronBuilder: {
builderOptions: {
'productName': 'all electron',//生成 exe 的名字
"appId": "com.xi.www",//包名
"copyright": "xi",//版权信息
"directories": { // 输出文件夹
"output": "electron_output",
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。若为 false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, //是否允许修改安装目录
"installerIcon": "./build/icons/icon.ico",// 安装时图标
"uninstallerIcon": "./build/icons/icon.ico",//卸载时图标
"installerHeaderIcon": "./build/icons/icon.ico", // 安装时头部图标
"createDesktopShortcut": true, // 是否创建桌面图标
"createStartMenuShortcut": true,// 是否创建开始菜单图标
"shortcutName": "all-electron", // 快捷方式名称
"runAfterFinish": false,//是否安装完成后运行
},
"win": {
"icon": "build/icons/icon.ico",//图标路径
"target": [
{
"target": "nsis", //利用 nsis 制作安装程序
"arch": [
"x64", //64 位
// "ia32" //32 位
]
}
]
}
}
}
}
}
其中值得注意的是:
1、directories 输出文件不做修改则默输出在 dist_electron 下。
2、productName 修改的名字允许为汉字。
3、所有路径均是相对与项目的根路径。
4、icon.ico 图标可通过这篇文章的 electron-icon-builder 生成
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论