electron-vue項目筆記8——electron-builder（windows打包）

因爲咱們使用npm run build的時候，electron默認打包的程序沒有提供用戶能夠選擇安裝路徑與安裝語言嚮導，因此，咱們在打包的時候還須要從新配置

electron-builder官網，查看更多配置

1. 打開package.json文件,在win的配置裏添加打包目標代碼,build配置項裏的最後，添加nsis配置

• 請注意，若是有代碼簽名證書，請配置正確的代碼簽名證書，若是沒有證書，請刪除配置"certificateFile": "sign-xxx.pfx", "certificatePassword": "xxxxxx",

• 若是在win裏配置publish，打包出錯的，請把publish配置刪除。其實仍是能生成latest.yml

"build": {
        "productName": "data-visuation",
        "copyright": "copyright© Guangzhou shumei.,Ltd",
        "appId": "com.shumei.data-visuation",
        "asar": true,
        "asarUnpack":[
        "./dist/electron",
        "./package.json"
        ],
        "directories": {
            "output": "build"
        },
        "files": [
            "dist/electron/**/*"
        ],
        "dmg": {
            "contents": [
            {
                "x": 410,
                "y": 150,
                "type": "link",
                "path": "/Applications"
            },
            {
                "x": 130,
                "y": 150,
                "type": "file"
            }
            ]
        },
        "mac": {
            "icon": "build/icons/icon.icns"
        },
        "win": {
            "icon": "build/icons/icon.ico",
            "target": [
                {
                "target": "nsis",
                "arch": [ 
                    "ia32"
                ]
                }
            ]
        },
      
        "linux": {
            "icon": "build/icons"
        },
        "nsis": {
            "oneClick": false,
            "allowElevation": true,
            "allowToChangeInstallationDirectory": true,
            "installerIcon":"build/icons/icon.ico",
            "uninstallerIcon": "build/icons/icon.ico",
            "installerHeaderIcon": "build/icons/icon.ico",
            "createDesktopShortcut": true,
            "createStartMenuShortcut": true,
            "displayLanguageSelector": true,
            "multiLanguageInstaller": true,
            "installerLanguages": [
                "en_US",
                "zh_CN"
            ],
            "warningsAsErrors": false
        }
    },
複製代碼

3. npm run build 運行項目

若是打包前上一步運行項目是web端的，則須要先npm run dev運行桌面端的程序，而後才能npm run build打包正確的桌面端

4. 配置參數解析

"build": {
        "productName": "data-visuation",//項目名 這也是生成的exe文件的前綴名
        "copyright": "copyright© Guangzhou shumei.,Ltd",//版權 信息
        "appId": "com.shumei.data-visuation",//包名 
        "asar": true,//asar包有助於加快安裝文件的安裝速度，若是保留全部文件夾的話，在釋放文件的時候磁盤壓力會比較大，所以，使用asarUnpack屬性，將不須要打進asar包裏的文件路徑指定。
        "asarUnpack":[//使用asarUnpack屬性，將不須要打進asar包裏的文件路徑指定。
            "./dist/electron",//這裏的(electron文件夾下）index.html、main.js、rederer.js和styles.css就是每次編譯生成的文件，所以，若是要進行增量更新，(electron文件夾下）這四個文件是必須更新的
            "./package.json"//因爲每次版本更新時，package.json的內容也會改變，因此package.json也必須排除
        ],
        "directories": {// 打包輸出的文件夾位置
            "output": "build"
        },
        "files": [
            "dist/electron/**/*"
        ],
        "dmg": {
            "contents": [
            {
                "x": 410,
                "y": 150,
                "type": "link",
                "path": "/Applications"
            },
            {
                "x": 130,
                "y": 150,
                "type": "file"
            }
            ]
        },
        "mac": {
            "icon": "build/icons/icon.icns"
        },
        "win": {
            "icon": "build/icons/icon.ico",//圖標路徑 
            "certificateFile": "sign-xxxx.pfx",//代碼簽名證書
            "certificatePassword": "xxxxx",//代碼簽名證書密碼
            "target": [
                {
                    "target": "nsis",// 咱們要的目標安裝包
                    "arch": [ // 這個意思是打出來32 bit + 64 bit的包，可是要注意：這樣打包出來的安裝包體積比較大，因此建議直接打32的安裝包。
                        "x64", 
                        "ia32"
                    ]
                }
            ]
        },
      
        "linux": {
            "icon": "build/icons"
        },
        "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,// 建立開始菜單圖標
            "displayLanguageSelector": true,//安裝界面顯示語言選擇器
            "multiLanguageInstaller": true,//安裝界面多國語言包
            "installerLanguages": [//安裝界面多語言選項，若是配置該項，則（安裝界面的提示文字）語言選擇只有這個配置
                "en_US",
                "zh_CN"
            ],
            "warningsAsErrors": false// 安裝警告不做爲錯誤
        },
        "publish": [//publish此項用於軟件更新的配置，主要是爲了生成lastest.yaml配置文件
            {
              "provider": "guangzhou",// 服務器提供商 也能夠是GitHub等等
              "url": "http://172.0.0.1:3000" // 服務器地址
            }
        ]
    }
複製代碼

5. 打包注意事項

• 1. 若是打包的圖片或者圖標路徑找不到，則會打包失敗，例如： 打包build配置裏，配置了win系統的圖標路徑，若是把build下的icon刪掉，打包時就會找不到這個圖標，打包異常。全部此時不要把build目錄下的icon文件夾刪掉

  "win": {
              "icon": "build/icons/icon.ico",//圖標路徑 
          }
  複製代碼

• 2. 若是打包時網絡出錯，也會打包不成功
• 3. 項目中放置圖片路徑，請儘可能放到static目錄下，不要放到assets下，由於webpack打包時，會打包assets（把小於*k的圖片打包了，也就是數沒有這個路徑），不打包static。因此有時候assets路徑出錯，找不到該文件路徑，打包失敗
• 4. 在打包桌面應用時，若是打包前的一次運行項目是運行web端的，就會打包web端的，因此必定要記得打包桌面應用時，先npm run dev運行項目

參考

• Electron-builder打包詳解
• Electron的一個增量升級方案