Electron + Vue 集成记（踩坑记）

注意：
这个是集成 2.x 版本的Vue，如果想集成 3.x 的，看这里!

这几天想用Electron做一个PC程序出来，于是想用Electron 集成Vue来做。万万没有想到都是使用 npm 来安装的 Electron 和 Vue，集成两者竟然花了一天多的时间！这一天中，遇到过手动集成白屏的，不会解决，试过好几个库 npm install 报错的，也解决不了。幸好最后还是集成好了。下面是集成步骤（踩坑记）。

集成后效果图

一、开发环境的准备

1、安装 Node.js 坏境

从 node.js 官网地址 下载直接安装即可。

2、安装 Vue Cli（安装慢的话，可以使用淘宝镜像cnpm替代npm）

npm install @vue/cli -g
npm install @vue/cli-service -g
npm install webpack -g

3、全局安装 Electron

npm install -g electron

4、查看是否安装成功 :

C:\>node -v
v16.6.2

C:\>vue -V
@vue/cli 4.5.13

C:\>electron -v

v13.1.9

二、搭建vue项目

1. 首先使用 vue-cli 搭建基础 vue框架

C:\>vue init webpack vue-demo

2、到vue-demo目录下，执行：

C:\vue-demo>npm run dev

 DONE  Compiled successfully in 4453ms                                                                     上午2:39:20

 I  Your application is running here: http://localhost:8080

浏览器打开http://localhost:8080
此时显示的是

至此，搭建vue成功。

三、集成 Electron

我们使用 “Vue CLI Plugin Electron Builder” 来集成Electron，只需要一步：

# 在项目下命令行执行
vue add electron-builder

安装完成后，我们打开开发服务器：

npm run electron:serve

将项目打包成exe，可以使用下面的命令：

npm run electron:build

四、踩坑记

1、执行 npm run electron:serve 和 npm run electron:build 时出现：

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

解决办法见 这里

2、执行 npm run electron:serve 和 npm run electron:build 时出现：

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'vue-cli-plugin-electron-builder'
Require stack:
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\bin\vue-cli-service.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at idToPlugin (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:145:14)
    at C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:184:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:170:10)
    at new Service (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:32:25)
    at Object.<anonymous> (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\bin\vue-cli-service.js:15:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Fan\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli-service\\lib\\Service.js',
    'C:\\Users\\Fan\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js'
  ]
}

解决办法：全局安装 ‘vue-cli-plugin-electron-builder’

npm -g install vue-cli-plugin-electron-builder

3、执行 npm run electron:serve 和 npm run electron:build 时出现：

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue-template-compiler/package.json'
Require stack:
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\config\base.js
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\bin\vue-cli-service.js
Error: Cannot find module 'vue-template-compiler/package.json'
Require stack:
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\config\base.js
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\bin\vue-cli-service.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\config\base.js:81:34
    at C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:236:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:236:26)
    at Service.resolveWebpackConfig (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (C:\Users\Fan\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25)

解决办法：全局安装 ‘vue-template-compiler’

4、执行 npm run electron:serve 时出现：

 INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

这个是默认安装vue-devtools插件，不过因为网络问题，安装不上导致的，安装不上暂时没有问题，解决办法：注释项目下 src/background.js 里面相关的代码

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      //await installExtension(VUEJS_DEVTOOLS)    // 注释这一行
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

如果一定要安装vue-devtools插件，参考这篇文章。

5、执行 npm run electron:serve 时App出现白屏，没有出现vue的页面：
仔细看App的DevTools中的Console出现的错误，没错，是它导致的：

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决办法：在项目根目录创建vue.config.js文件，编写如下代码。

module.exports = {
  runtimeCompiler: true
}