Electron-vue开发框架搭建与注意事项

Electron-vue开发框架搭建与注意事项

初始化项目

electron-vue脚手架项目初始化太慢，即使切换与国内源，依然很慢。有效的方法是先将electron-vue下载下来，再安装样板代码。

• electron-vue国内码云地址（https://gitee.com/mirrors/electron-vue），直接下载到本地。
• 或通过git直接克隆到本地 git clone https://gitee.com/mirrors/electron-vue.git
• 安装样板代码：vue init F:\electron_pro\electron-vue my-project，将“F:\electron_pro\electron-vue”换成自己的地址

安装开发和运行环境

• npm install
• npm run dev 调试运行
• npm run build:win32 打包成windows下的可执行应用程序，打包工具为electron-packager

注意事项

1. 运行npn run dev,会出现下面的错误
   
   根据别人在issue里面的写法,.在electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中添加如下代码：

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()
  ]