初尝electron-vue项目搭建

以前只见过，但是一直没时间来玩玩，最近公司有需求重构某个应用做桌面程序，便开始了探索之路

文档：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

我的环境：

node:14.7

yarn:1.22.4

Windows10专业版

# 安装 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

有个警告，也不知道是个啥，暂且不管，官方推荐 yarn安装（先安装yarn，npm install -g yarn），反正我试了npm慢的一P（没钱买梯子），用cnpm后面build的时候会报错，看网上都说不能用cnpm，故我也用上了yarn ( yarn install )，会报错找不到python，咱也先不管了。

然后就兴高采烈的  yarn run dev，结果

 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

    - index.js:284
      [electron-demo]/[html-webpack-plugin]/index.js:284:18

    - runMicrotasks

    - task_queues.js:93 processTicksAndRejections
      internal/process/task_queues.js:93:5

然后找到https://github.com/SimulatedGREG/electron-vue/issues/979

//.electron-vue/webpack.renderer.config.js 修改
// find the rendererConfig variable
let rendererConfig = {
  // then, find the plugins property
  plugins: [
    // then, replace the call to the HtmlWebpackPlugin constructor
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      //添加这两行
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),
  ]
}

// ./src/index.ejs 修改
<div id="app"></div>
<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
  <script>
    window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
  </script>
<% } %>

// ./src/main/index.js 修改
function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

保存完，界面就出来了

其实还会看到（调试工具预装不上）

yarn add vue-devtools --dev 

//修改main/index.dev.js:
//添加
import { BrowserWindow } from 'electron'
//修改
require('electron').app.on('ready', () => {
  // let installExtension = require('electron-devtools-installer')
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
  BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')
})

这时还会报错

 [11564:0822/230100.149:ERROR:CONSOLE(7574)] "Extension server error: Operation failed: : has no execution context", source: chrome-devtools://devtools/bundled/inspector.js (7574)

搞不懂了，先不管，其实vue调试工具已经出来了