Electron-vue搭建配置、打包(有效避免报错解决方法)

Electron-vue搭建配置、打包(有效避免报错解决方法)

1、vue init simulatedgreg/electron-vue 项目名称

2、cd进入项目名称，安装依赖npm intsall

3、npm run dev启动项目

4、启动项目可能会报下面的错误

5、解决报错方法：
启动报错ReferenceError: process is not defined解决方法
找到.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的HtmlWebpackPlugin，添加templateParameters：

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

添加位置如下：

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    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
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

6、再次启动项目，启动成功


出现上述electron应用界面说明electron-vue搭建成功。

7、使用npm run build进行打包

8、打包结束后在build文件夹下面就会出现打包后的桌面应用.exe文件，点击即可下载安装在电脑桌面上
9、点击.exe文件进行点击安装