将Vue工程打包为Electron：vue-cli-plugin-electron-builder

介绍

vue-cli-plugin-electron-builder 插件的作用是将一个Vue工程打包为Electron程序。
官网:

https://nklayman.github.io/vue-cli-plugin-electron-builder/

与electron-vue对比

	作用目标	作用方式	更新维护
electron-vue	electron-vue工程	编译工程中的Vue代码	不及时
vue-cli-plugin-electron-builder	Vue工程	将Vue工程打包为Electron程序	及时

且截止到目前，electron-vue依赖的electron版本为2.0.4，然而最新的electron版本是12.0.2。
综上述，推荐使用vue-cli-plugin-electron-builder 。

使用

首先构建一个常规的Vue工程，并确保工程可顺利运行。
这里将Vue工程导入到VSCode中。打开VSCode的控制台，输入：

vue add electron-builder

等待安装完成。这样，就会在src目录下生成background.js文件，并在package.json中新增启动命令。
然后输入新的启动命令来运行Electron程序：

npm run electron:serve

若此时运行出错，提示Cannot find module 'electron'，则执行命令清理并重新安装依赖：

npm cache clean --f
npm install

打包

运行：

npm run electron:build

构建成功，会提示Build complete!。
打包会先下载打包依赖，若网络连接出错，最终会导致：

Failed at the [email protected] electron:build script.

此时，再运行一次打包命令重新下载即可。

其他

在Vue中使用js-cookie插件，调试时是正常的，但打包为Electron后就会无效。建议直接使用Electron的Cookies类。