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
