介绍
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 vue-element-admin@4.4.0 electron:build script.
此时，再运行一次打包命令重新下载即可。
其他
在Vue中使用js-cookie插件，调试时是正常的，但打包为Electron后就会无效。建议直接使用Electron的Cookies类。
