Electron-vue ReferenceError: process is not defined

在开发Electron-vue的时候, 我开始的时候使用的Node 10.xx后面更新到了v12.13.0但是再次运行项目的时候就会报错

Html WebpackPlugin:
  ReferenceError: process is not defined

具体报错信息如下:


process is not defined

我当前的项目环境

node                       v12.13.0
npm                        v6.12.0
webpack                    v4.15.1
vue-cli                    v3.8.2
vue                        v2.5.16
System                     Window 10

问题排查

刚开始并没有意识到是因为Node 的版本升级造成的, 以为那里不小心改错了, 找了好久的问题, 各种排查都没找到问题的所在, 最后也是寻求了度娘的帮助才把问题解决了。
最终也是在GIthub上找到解决的办法https://github.com/SimulatedGREG/electron-vue/issues/871

解决问题

修改你项目文件下.electron-vue里面的webpack.renderer.config.jswebpack.web.config.js

./.electron-vue文件

两个文件修改的内容都是一样的

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

最终webpack.web.config.js修改完成后内容如下:

webpack.web.config.js添加的内容

webpack.renderer.config.js修改完成后的内容如下:
webpack.renderer.config.js添加的内容

测试运行

退出调试, 重新运行项目npm run dev
这样就可以看到项目正常运行了

推荐阅读更多精彩内容