electron + vue

初学electron，尝试使用electron-vue
按照文档开始创建electron + vue项目，文档链接

1. npm install -g vue-cli
2. vue init simulatedgreg/electron-vue my-project
3. cd my-project
4. npm install
   注意：这一步事件比较长，而且会出现问题，我在这一步就出现问题了，安装成功后无法启动
5. npm run dev
   问题：1.npm install之后，执行npm run dev,报错 Electron failed to install correctly…，不啦不啦一大堆，什么问题呢？百度，需要删除node_modules/electron的安装包，然后再重新npm install,重新安装包即可。
   按照说明，删除，重新安装，依旧如此，无奈转yarn
   1.删除node_modules
   2.安装全局yarn: npm install yarn -g
   3.安装项目依赖： yarn install
   4.安装electron： yarn install electron --save
   5.重新启动程序： electron .
   原文链接
   2.完成install后，npm run dev报错，require is not defined, process is not defined,
   不要惊慌，不要害怕，跟小哥哥一步一步来

首先：在src/main文件夹下找到index.js,找到new BrowserWindow，修改webPreferences的nodeIntegration为true

new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true
    }
  })

重启项目试一下，此时应该已经解决require的问题了
这个问题是因为最新的electron@5.0系列中，这个nodeIntegration参数，默认改成false了。而在以前版本的electron中，这个nodeIntegration参数，默认为true。

如果process依旧是not defined，继续来，找到根目录下.electron-vue/webpack.web.config.js文件和 webpack.renderer.config.js，找到 new HtmlWebpackPlugin，添加如下属性

templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },

完整代码
webpack.web.config.js

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.renderer.config.js

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: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

完美解决，如果有疑问一起来探讨啊