electron 运行以及打包超时解决方法

背景

我是通过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这个工具转换处理的