【electron-vue】 一、elecron-vue 環境搭建

一、環境搭建

1.1 創建項目

# 安裝腳手架
npm install -g vue-cli

# 安裝腳手架樣板項目
vue init simulatedgreg/electron-vue elec-demo01

 

1.2 Webpack ReferenceError:process is not defined 錯誤處理

在執行 npm install 命令時，可能會報錯，需要修改 webpack 配置文件

錯誤內容：

ERROR in Template execution failed: ReferenceError: process is not defined
  
  ERROR in   ReferenceError: process is not defined
    
    - index.ejs:11 eval
      [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2
    
    - index.ejs:16 module.exports
      [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3

解決方案：

修改.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
}),