前置條件：

• 本項目為@vue-cli3 搭建的，node版本16.13.2，electron版本18.3.5
• 已安裝electron-builder工具

配置：

1、在vue.config.js 文件中增加配置項：

	pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "productName": "electron-template",
                "appId": "com.xinai.template",
                "copyright": "xinai",
                "directories": {
                    "output": "build"
                },
                "dmg": {
                    "title": "electron-template",
                    "icon": "public/favicon.ico",
                    "contents": [{
                            "x": 410,
                            "y": 150,
                            "type": "link",
                            "path": "/Applications"
                        },
                        {
                            "x": 130,
                            "y": 150,
                            "type": "file"
                        }
                    ]
                },
                "mac": {
                    "icon": "public/favicon.ico"
                },
                "win": {
                    "icon": "public/favicon.ico",
                    "artifactName": "${productName}.${version}.${ext}",
                    "target": [{
                        "target": "nsis",
                        "arch": [
                            "x64"
                        ]
                    }]
                },
                "linux": {
                    "icon": "public/favicon.ico"
                },
                "nsis": {
                    "oneClick": false,
                    "allowElevation": true,
                    "allowToChangeInstallationDirectory": true,
                    "installerIcon": "public/favicon.ico",
                    "uninstallerIcon": "public/favicon.ico",
                    "installerHeaderIcon": "public/favicon.ico",
                    "createDesktopShortcut": true,
                    "createStartMenuShortcut": true,
                    "shortcutName": "electron項目模板",
                    "include": "script/installer.nsi",
                    "warningsAsErrors": false
                },
                "publish": [{
                    "provider": "generic",
                    "url": ""
                }]
            }
        }
    }

圖標大小需為 256*256

2、根目錄增加 scripts 文件夾，新建 installer.nsi 文件，文件中具體腳本內容（可參考）：

; 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

目錄如下：

3、執行打包指令

npm run electron:build

這個時候通常會遇到以下報錯，如下：

這是由于打包的時候要到Github上下載這個資源，所以會特別慢

解決方案：
A.、連接 fang qiang 軟件重新打包（不建議使用 fang qiang 軟件）
B、（推薦）直接復制這個github地址到瀏覽器上進行下載，并放在指定位置，如：

C:\Users\Administrator\AppData\Local\electron\Cache

這時重新執行打包指令，便可以打包成功啦

4、打包成功后會生成exe文件

5、安裝

雙擊exe應用程序，彈出安裝向導，按步驟進行安裝：

完成安裝后會自動啟動程序，或者雙擊安裝目錄中的應用程序也可啟動程序：

over