Electron-Vue，踩坑之Node版本升级

node官网将v12版本作为LTS(长期支持版本)的默认下载项
已经有段时间
当时使用Electron-Vue还是v10版本
v10版本也将在明年4月份后进入维护阶段
那就又了今天的教程v10升级v12

其实升级node应该没什么好说的
官网下载12.13.0版本直接装就好了
这个版本号是发文时候最新的

安装好后直接到项目中
跑了一下 yarn dev

ERROR in Template execution failed: ReferenceError: process is not defined

   ERROR in   ReferenceError: process is not defined

      - index.ejs:102
        ../src/index.ejs:102:2

      - index.ejs:107 module.exports
        ../src/index.ejs:107:3

      - index.js:415
        [..]/[html-webpack-plugin]/index.js:415:16

      - async Promise.all

不出所料，报错了
直接百度了以下错误
已知的"解决办法"是将版本降回到v10
这他娘的也算是解决办法真是哔了狗

没有深究这个webpack以及这个html-webpack-plugin插件的问题

直接带着问题区github上找了一下
直接说解决方案
https://github.com/SimulatedGREG/electron-vue/issues/871#issuecomment-529809406

webpack.renderer.config.js 文件修改

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

index.ejs 文件修改

<!DOCTYPE html>
<html lang="zh">
  
  <head>
    <meta charset="utf-8">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')</script>
      <% } %></head>
  
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
      <script>window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')</script>
      <% } %>
        <!-- webpack builds are automatically injected --></body>

</html>

index 这个文件修改改动是在下面部分 if标签里
作者原话是说
直接干掉了 process ，确实解决了问题
也没发现什么"副作用"

后续BUG有待观察

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

Electron-Vue，踩坑之Node版本升级

文章评论