electron结合vue进行开发

最近准备入手一个项目，使用到了electron这个跨屏台的编程框架，同时我想集成vue,所以在网上找各种electron+vue的教程资料。主要找到了三种资料，第一种是使用electro-vue这个脚手架，可是这个脚手架是用的vue-cli2,现在都是vue cli 3.0了，显然不适用了，这个脚手夹，在github上好像不维护了。后来有人在cli3.0的基础上开发了一个插件vue-cli-plugin-electron-builder，github上的星星也不是很多。另一种脚手架是Electron Forge，据说可以直接生成一个vue为模板的开发目录，实际效果怎么样，我还没有尝试出来。最后一种就是不用脚手架，自己硬撸，大体的步骤就是先用vue cli创建工程，然后npm安装electron,electron不是需要一个主页面html吗，那就把他指向vue build生成的那个dist分发目录下的html（即vue工程编译后的结果html页面），然后再稍微做下调整，将package.json+electron.js放到dist目录下（为了打包分发应用时不出错）。
三种方式，谁有谁略，我也不好说，看自己的意向吧。

关于vue-cli-plugin-electron-builder安装和使用：

1
2
3
4
5
6
7
8
9
10

## 安装命令：
vue add electron-builder。
## 开发：
yarn electron:serve 
## 或者 
npm run electron:serve
## 打包：
yarn electron:build 
## 或者 
npm run electron:build

1.安装：vue-cli-plugin-electron-builder错误：

执行命令：vue add electron-builder，安装vue插件时出现：“ERROR command failed: yarn add -D –registry=https://registry.npm.taobao.org –disturl=https://npm.taobao.org/dist vue-cli-plugin-electron-builder”

“Error: connect ETIMEDOUT 52.216.110.203:443 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1097:14) ERROR command failed: yarn –registry=https://registry.npm.taobao.org –disturl=https://npm.taobao.org/dist“

后来使用：“yarn add -D –registry=https://registry.npm.taobao.org –disturl=https://npm.taobao.org/dist vue-cli-plugin-electron-builder”，还是不成功。

解决方式：
1）插件的开发者给出的答案是:

1
2
3

https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/233

Electron is failing to download from the default mirror. Use the Chinese mirror by prepending the install command with ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" (sets the env var). See the Electron Install Docs for more info.

2）后来我发现了更好的解决方式，在命令行中运行以下命令,这种方式就是设置全局的仓库地址，和在开发目录下设置.npmrc文件有区别吗，我觉得没有区别,有待确定。

1
2
3
4
5
6
7

npm config get registry  // 查看npm当前镜像源
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

yarn config get registry  // 查看yarn当前镜像源
yarn config set registry https://registry.npm.taobao.org/  // 设置yarn镜像源为淘宝镜像

3)使用缓存或者镜像

安装完成之后

执行命令：yarn electron:serve，就可以看到熟悉的vue界面和electron界面了。具体的，这个插件到底改了那些内容，还有待探究。

2.运行yarn electron:build报错

好不容易安装完成了，也能运行了，打包的时候又卡住了。究其原因，还是因为github被墙的原因，真是我伟大的政府啊。

解决方法
没办法，不能添加npm的淘宝镜像了，只能离线安装了。查看build步骤，以下载winCodeSign为例，手动去搜索或者翻墙下载给出的GitHub地址，下载下来。

打开文件夹 C:\Users\pp\AppData\Local\electron-builder\Cache ,其中pp为你电脑的用户名，新建文件夹winCodeSign，将下载下来的压缩包，解压到该文件夹下以压缩包文件名命名的文件夹中，如果下载的是winCodeSign-2.4.0.7z,解压后的路径就为C:\Users\pp\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.4.0。

其他的下载包也是同样的方法进行处理。

nsis缓存目录

都完成了之后，编译的时候，不出现download字段提示了之后，就可以再次编译了。

3.could not find: “..\node_modules\app-builder-lib\templates\nsis\include\StdUtils.nsh“

把下载的问题解决了之后，又出现了新的问题，一波未平，一波又起，真是不容易啊。

解决方法
去掉目录中的中文，去掉目录中的中文。

可喜可贺，可喜可贺，终于是完成了一件大事。

4.Command failed with exit code 1

奇怪的事情发生了，今天写着写着代码，手动关闭VS code后，程序就不能用了。代码返回到原先成功运行的时候，也是不可以的。至今是未解之谜。

下面这张图是我关闭VS code后重新打开运行报的错，起码来说，错误原因给表明了。终端用的是git bash终端，我感觉在VScode中使用终端，总是会莫名其妙的出现各种字符不显示，也是很让人头疼，用Power shell不行，换成了git bash也不行，又抽风了。

解决方法
重新运行一遍vue add electron-builder,然后yarn electron:serve就可以使用了。

疑问
使用vue-cli-plugin-electron-builder进行开发，当我npm运行错误的时候，总会弹出vue-cli-serve不是可执行的命令。例如：我在安装elementUI按需引入的时候，执行命令npm install babel-plugin-component -D，第一次时没有安装成功的，我再次运行yarn electron:serve，便提示我vue-cli-serve不是可运行的程序或命令，在我将npm uninstall babel-plugin-component卸载之后，重新安装，便又可以运行了，很奇怪。