electron-vue項目搭建過程

一、安裝vue腳手架

# 安裝 vue-cli 和 腳手架樣闆代碼
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安裝依賴并運作你的程式
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
           

二、錯誤處理

npm run dev時會報錯：

Html Webpack Plugin:

ReferenceError: process is not defined
  
  - index.ejs:11 eval
    [.]/[[email protected]@html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2
  
  - index.ejs:16 module.exports
    [.]/[[email protected]@html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3
  
  - index.js:284 
    [my-project]/[[email protected]@html-webpack-plugin]/index.js:284:18
  
  - runMicrotasks
  
  - task_queues.js:94 processTicksAndRejections
    internal/process/task_queues.js:94:5
      

解決方式：

在.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的HtmlWebpackPlugin，添加templateParameters字段，如下所示：

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      // 修複npm run dev報錯的問題
      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
    }),
    new webpack.DefinePlugin({
      'process.env.IS_WEB': 'true'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
           

三、運作結果