Electron-Vue 发布App应用的默认打包的安装包，名称不能设置中文，logo是默认，不能自定义安装等等问题，就我自己的情况，就以下三个内容进行说明
- 如何更换应用名称
- 如何更换应用Logo
- 如何自定义安装
环境
vue3electron13electron-builder- ...
其它不多说先看配置vue.config.js文件的部分内容
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
externals: ['serialport'],
builderOptions: {
"productName": "Build串口调试Api工具",
"appId": "com.apitool",
"win": {
},
//window自动义安装
"nsis": {
"oneClick": false, //是否静默安装（一键式安装）
"perMachine": true, //安装模式 true=所有用户 false=自己
"allowElevation": true, //允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序
"allowToChangeInstallationDirectory": true, //是否安装时是否能更换安装目录
"createDesktopShortcut": true, //是否创建桌面快捷建
"menuCategory": true, //是否在开始菜单里创建子菜单
"installerIcon": "build/icons/icon.ico", //安装应用的图片,一定要 ico格式的图片
"installerSidebar": "public/logo.bmp", //安装程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
"uninstallerSidebar": "build/icons/uninstall.bmp", //安装程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
"include": "scripts/installer.nsi"
}
}
}
}
})
上页的配置，以我实际的需求进行的简单，至于更多的配置内容详情可以查看官方文档 nsis配置文件 ，在这里也可以查看其它平台安装的。
如何更换应用名称
更换应用名称的方法两个，一是在package.json中增加一个producteName属性，这个属性是可以设置为中文的（name属性只能用英文），二是在vue.confog.js中配置，如上面的文件所示那样。vue.config.js 中的配置是最高级
如何更换应用Logo
因为Logo所要的尺寸有点多，这里要安装一个依赖工具electron-icon-builder，这个工具可以自动生成多个不一样的尺寸，是一个很方便工具。同时重点说明一下electron-builder默认使用的图片路径是build与package.json同级，这应该算是隐性规则，要注意
npm i electron-icon-builder --D
通过安装上面的工具后，在package.json配置命令,增加electron:icon-builder命令，如下所示
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:icon-builder": "electron-icon-builder --input=./public/logo.png --output=build --flatten",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
关于electron:icon-builder,它有三个参数
-
--input输入的文件路径，相对于当前文件而言 -
--output输出的文件夹，这个最好固定的build，原因上面有说明 -
--flatten是否压塑，没有值
配置完成后执行下面命令,就会生成 build目录，这个时候再打包生成的应用及安装包的图标就是 logo.png ，logo.png不能太大，最好不要起过1M。小，清楚就可以
yarn electron:icon-builder
如何自定义安装
electron-builder打包后默认的安装方便是便捷式的，没有欢迎界面，也不能自己选择安装目录等问题，上页的主体配置文件与给说明，现在看一下关键位置的配置信息
"nsis": {
"oneClick": false, //是否静默安装（一键式安装）
"perMachine": true, //安装模式 true=所有用户 false=自己
"allowElevation": true, //允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序
"allowToChangeInstallationDirectory": true, //是否安装时是否能更换安装目录
"createDesktopShortcut": true, //是否创建桌面快捷建
"menuCategory": true, //是否在开始菜单里创建子菜单
"installerIcon": "build/icons/icon.ico", //安装应用的图片,一定要 ico格式的图片
"installerSidebar": "public/logo.bmp", //安装程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
"uninstallerSidebar": "build/icons/uninstall.bmp", //卸载程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
"include": "scripts/installer.nsi"
}
都有文字说明，应该都挺好理解，这里重点说一下installerIcon,installerSidebar,installerSidebar,这个图片路径设置，这个路径是相对于vue.config.js或是相对于build同级目录都可以，目前配置都是基于build的同级路径
关于include的配置的文件 scripts/installer.nsi 这个是window的安装配置，目前对于这一块不很懂，详情可以nsis的教程，但给个最基本的内容，供参考（也是网上找的，但测试过能用）
; HM NIS Edit Wizard helper defines
!include "MUI2.nsh"
; MUI Settings
!define MUI_ABORTWARNING
; 欢迎页面
!insertmacro MUI_PAGE_WELCOME
ShowInstDetails show
ShowUnInstDetails show
SpaceTexts show
; 安装脚本
!macro customInstall
!macroend
大概意思是
引入现代用户界面,相关于类库
预定义常量
定义宏
设置属性
执行自动安装
关于这一块更多还是要看nsis文档，不对之处，欢迎留言指正。
The End
