Electron-vue 第一个项目搭建（开发环境配置）

操作系统windows

第一步：安装node.js

下载地址：https://nodejs.org/en/

下载LTS版，安装完成后，打开cmd输入node -v，会弹出node.js版本（安装成功）

image

第二步：安装vue-cli

如果电脑里没有安装vue-cli，全局安装：

npm install -g vue-cli

第三步：安装electron-vue模板

vue init simulatedgreg/electron-vue my-project

my-project：项目文件夹路径

第四步：安装依赖

进入项目文件夹下安装依赖

cd my-project

npm install

第五步：进入开发模式

npm run dev

一切都顺利的话，会弹出下图

image

第六步：报错处理

在实际安装过程中，可能会碰上各种各样的问题，需要大家自行谷歌或者百度解决

下面说一个我在安装过程遇上的报错：

npm run dev 之后，弹出下图界面

image

报错：ERROR in Template execution failed: ReferenceError: process is not defined

image

处理方法：

修改my-project文件下.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，添加templateParameters

修改后如下：

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
    }),

参考：
https://segmentfault.com/a/1190000019487488
https://www.jianshu.com/p/bdf0a23e7257