electron-builder打包配置說明

發現問題

通過vue建立的項目使用electron-builder打包(不會eletron打包vue項目的看這裡)出exe後發現名字就直接是項目文件夾的名字，但此時想自定義漢字名稱，通過嘗試直接修改package.json中的name後發現此法僅限於修改為英文名稱，漢字會報錯無法打包。

踩坑過程

在網上翻閱後發現有人直接在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生成

項目源碼

為了避免自己踩坑，也為了方便後來者，這裡我將vue使用electron-builder打包後的模板項目源碼放這兒了。