發(fā)現(xiàn)問題

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

成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)公司、微信開發(fā)、小程序開發(fā)、集團(tuán)成都企業(yè)網(wǎng)站定制等服務(wù)項目。核心團(tuán)隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：水電改造等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致稱譽！

踩坑過程

在網(wǎng)上翻閱后發(fā)現(xiàn)有人直接在package.json中這樣添加build：

 "scripts": {
    // ...
  },
  "build": {
    "productName": "xxx",
    "appId": "xxx",
    // ...
   },

這其實是個大坑，我嘗試后發(fā)現(xiàn)會報錯無效配置：
InvalidConfigurationError: 'build' in the application package.json，后面又查了下，大概是版本原因，electron-builder某個版本之后的配置得寫在vue.config.js中才能生效。但網(wǎng)上好多文章都是直接在package.json里面配置，還有在electron生成的background.js里配置的。

解決辦法

eletron打包總會出現(xiàn)莫名其妙的問題，圖標(biāo)缺失、路徑錯誤。。。。。。其實大多數(shù)的坑都是國內(nèi)網(wǎng)絡(luò)環(huán)境和自己的項目配置問題，這里就配置做一下說明。需要在vue.config.js中對electron-builder進(jìn)行配置(沒vue.config.js的自己建一個就ok了)，具體配置如下：

module.exports = {
  //判斷開發(fā)模式還是生產(chǎn)模式
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  //插件配置
  pluginOptions: {
    //electronBuilder配置
    electronBuilder: {
      builderOptions: {
        'productName': 'all electron',//生成exe的名字
        "appId": "com.xi.www",//包名  
        "copyright": "xi",//版權(quán)信息
        "directories": { // 輸出文件夾
          "output": "electron_output",
        },
        "nsis": {
          "oneClick": false, // 是否一鍵安裝
          "allowElevation": true, // 允許請求提升。若為false，則用戶必須使用提升的權(quán)限重新啟動安裝程序。
          "allowToChangeInstallationDirectory": true, //是否允許修改安裝目錄
          "installerIcon": "./build/icons/icon.ico",// 安裝時圖標(biāo)
          "uninstallerIcon": "./build/icons/icon.ico",//卸載時圖標(biāo)
          "installerHeaderIcon": "./build/icons/icon.ico", // 安裝時頭部圖標(biāo)
          "createDesktopShortcut": true, // 是否創(chuàng)建桌面圖標(biāo)
          "createStartMenuShortcut": true,// 是否創(chuàng)建開始菜單圖標(biāo)
          "shortcutName": "all-electron", // 快捷方式名稱
          "runAfterFinish": false,//是否安裝完成后運行
        },
        "win": {
          "icon": "build/icons/icon.ico",//圖標(biāo)路徑
          "target": [
            {
              "target": "nsis", //利用nsis制作安裝程序
              "arch": [
                "x64", //64位
                // "ia32" //32位
              ]
            }
          ]
        }
      }
    }
  }
}

其中值得注意的是：
1、directories輸出文件不做修改則默輸出在dist_electron下。
2、productName修改的名字允許為漢字。
3、所有路徑均是相對與項目的根路徑。
4、icon.ico圖標(biāo)可通過這篇文章的electron-icon-builder生成

項目源碼

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