Electron + Vue2

Electron - 图1

一、开发环境的准备

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                            

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

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

Electron - 图2
至此，搭建vue成功。

三、集成 Electron

我们使用 “Vue CLI Plugin Electron Builder” 来集成Electron，只需要一步： ```vue 在项目下命令行执行

vue add electron-builder


- 安装完成后，我们打开开发服务器：
```vue
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 ()
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. (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 ()
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
}
```
Electron + Vue3
一、开发环境的准备

1、安装 Node.js 坏境
从 node.js 官网地址下载直接安装即可。
2、安装 Vue Cli（安装慢的话，建议使用淘宝镜像cnpm替代npm）
```
npm install @vue/cli -g
npm install @vue/cli-service -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 create vue-demo

到下面这一步，Vue3选默认的第二项，或者选手动配置的第三项。默认的第二项没有 Vue-Router 和 Vuex，所以这里要选第三项：

Electron - 图3

接下来的，就看自己的需要，不过“Progressive Web App (PWA) Support”选了会报错，不要选。

Electron - 图4

最后，选 Vue的版本，选 3.x ，之后看自己要求选，没有要去就一路回车。

Electron - 图5

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

C:\vue-demo>npm run serve

DONE  Compiled successfully in 4453ms                                                                    

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

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

Electron - 图6
至此，搭建vue成功。

三、集成 Electron

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

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

安装完成后，我们打开开发服务器：
```
npm run electron:serve
```
将项目打包成exe，可以使用下面的命令：

npm run electron:build

至此，搭建最新版的Electron+vue成功了，当然，最后还有几个bug要修改，具体见这里。

Electron

Electron + Vue2

一、开发环境的准备

1、安装 Node.js 坏境

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

3、全局安装 Electron

4、查看是否安装成功 :

二、搭建vue项目

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

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

三、集成 Electron

四、踩坑记

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

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

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

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

Electron + Vue3

一、开发环境的准备

1、安装 Node.js 坏境

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

3、全局安装 Electron

4、查看是否安装成功 :

二、搭建vue项目

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

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

三、集成 Electron