2019 最新 electron-vue 搭建流程

1.安装nodejs
2.修改npm 为淘宝源

修改 nodejs安装目录  D:\Janly\nodejs\node_modules\npm
下的  npmrc 文件

prefix=${APPDATA}\npm
增加 registry=https://registry.npm.taobao.org

3.在nodejs安装目录新建

4.修改全局设置

npm config set prefix "D:\Janly\nodejs\node_global"
npm config set cache"D:\Janly\nodejs\node_cache"

5.在系统环境变量添加环境变量

6.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

7.安装vue-cli 生成electron-vue

cnpm install -g vue-cli
vue init simulatedgreg/electron-vue news-windows

8.安装运行

cnpm install
npm run dev

9.运行报错因为node版本过高

修改 .electron-vue/webpack.renderer.config.js 和 webpack.web.config.js如下：
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.render.config.js

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

从新运行后效果