背景

我是通過vue add 的方式去添加electron相關依賴的，然后會在package.json中，自動生成運行和打包electron的命令"electron:serve": "vue-cli-service electron:serve", 和"electron:build": "vue-cli-service electron:build" ，運行electron，直接執行yarn electron:serve， 打包直接執行yarn electron:build

運行過程中遇到的問題

首先是運行過程中，對于electron依賴的拉取，會很慢，或者超時。

1. 配置npm的鏡像是淘寶鏡像： npm config set registry https://registry.npm.taobao.org，然后設置electron的鏡像為國內鏡像：npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
2. 使用yarn安裝，配置和1一樣
3. 使用cnpm安裝，cnpm自身安裝和node版本有關系，現在好像低于14的node版本，沒辦法安裝cnpm，建議采用最新的node版本安裝

打包過程中遇到的問題

打包過程中遇到的問題，無非就是依賴安裝、入口文件、打包之后的程序沒辦法執行

1. 依賴安裝，采用electron-build打包，會在打包過程中去拉取electron依賴以及一些electron-builder相關的依賴，解決方案一可同運行過程中一樣；解決方案二：可以通過將打包需要的依賴（主要是winCodeSign和nsis），去GitHub上下載，然后放到本地C:\用戶\AppData\Local\electron-builder\Cache；方案三：就是在項目更目錄下新建一個.npmrc文件，配置ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/；相對于方案一二，方案三的優勢比較明顯，不用手動下載，也不用去更改設置npm、yarn、cnpm的一些配置
2. 入口文件丟失問題，在使用electron-build，一般情況下不存在入口文件丟失問題，它都是自己生成的配置，但是使用electron-packager就會遇到入口文件丟失問題，一般需要在vue項目的dist目錄下打包，或者更改一下vue.config.js的相關打包配置

  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      chainWebpackMainProcess: (config) => {
        return "background.js";
        // config.output.filename((file) => {
        //   if (file.chunk.name === "index") {
        //     return "background.js";
        //   } else {
        //     return "[name].js";
        //   }
        // });
      },
    }
  },

3. 打包之后的程序沒辦法執行(白屏)
   我遇到的情況是win.loadUrl('app://./index.html')這個在生產環境下沒辦法訪問到靜態資源，解決辦法是在vue.config.js文件中增加一個配置customFileProtocol: './'，然后直接通過win.loadFile('index.html')打開靜態文件
4. 配置icon：electron程序對icon（安裝程序icon、應用icon等）有要求，必須是ico的格式，且格式大小必須是256x256的，同時，通過wps轉換的ico格式不滿足，目前是通過Axialis IconWorkshop這個工具轉換處理的