electron-vue项目搭建过程

一、安装vue脚手架

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

二、错误处理

npm run dev时会报错：

Html Webpack Plugin:

  ReferenceError: process is not defined
  
  - index.ejs:11 eval
    [.]/[[email protected]@html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2
  
  - index.ejs:16 module.exports
    [.]/[[email protected]@html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3
  
  - index.js:284 
    [my-project]/[[email protected]@html-webpack-plugin]/index.js:284:18
  
  - runMicrotasks
  
  - task_queues.js:94 processTicksAndRejections
    internal/process/task_queues.js:94:5

解决方式：
在.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的HtmlWebpackPlugin，添加templateParameters字段，如下所示：

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      // 修复npm run dev报错的问题
      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
    }),
    new webpack.DefinePlugin({
      'process.env.IS_WEB': 'true'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

三、运行结果