electron打包问题 （详细）

一、换源后打包
npm换源

npm config set registry http://r.cnpmjs.org 
npm config set registry http://registry.npm.taobao.org/

electron换源（如果npm换源后无效）

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

二、electron-builder问题（上面换源后不行，使用）

%HOMEPATH%\AppData\Local\electron-builder\Cache\winCodeSign

下，你需要winCodeSign-2.5.0

下载地址
winCodeSign-2.5.0

链接：https://pan.baidu.com/s/1_107yxnLrAp8RFmUyzN9-w 
提取码：mtwq 
复制这段内容后打开百度网盘手机App，操作更方便哦

三、electron-builder 打包成功，但是空白页面
在你的主进程文件，index.js中，有创建窗口的代码

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true, // require is not defined
      enableRemoteModule: true, // 解决'app' of undefined
      //contextIsolation: false // 未来如果升级electron版本 >12.0.0,需使用
    }
  })

• nodeIntegration

nodeIntegration: true

这个解决 require is not defined，各种undefined，在electron版本大于8时候，默认不集成node,
所以true允许浏览器集成node环境。

• enableRemoteModule

enableRemoteModule: true

解决解决’app’ of undefined ，这个有可能导致你打包后出现空白的原因，在你的electron版本大于10的时候出现，其实你项目中也许使用了remote模块，而官方在10的时候默认为false不开启。同时，electron.remote的模块也可以使用。

• contextIsolation
  这个是electron>12版本时候需要设置的，不过我估计你也不会更最新的。

四、出现Html Webpack Plugin:问题


为什么出现这个问题，你使用vue init electron_vue 模板很久没更新了，所以不兼容新版的electron版本。下面是解决

这里src/index.ejs这个入口文件下的这行

<% if (!process.browser) { %>

换成

<% if (!require('process').browser) { %>

目前只想到这么多，给我的感觉就是没有很好的文档，官方文档那就是api使用说明。读起来没什么重点，然后资料一堆乱，质量太低了。气的我写了这篇文章，希望大家做文档的时候要么不做，做就做好。

如果你还遇到需要热更新的问题，可以参考

• electron vue热更新,含源码
• electron 主线程和渲染线程通信