文章目录
准备
1、node.js 环境
2、@vue-cli3 脚手架
本示例所用版本为:
- Node.js: 16.13.2
- Electron: 18.3.5
项目搭建
1、创建 vue 项目
自定义选择预装组件: stylus babel typescript router vuex
vue create electron-template
2、添加 electron-builder 打包工具,并选择 electron 版本进行安装
vue add electron-builder
3、运行完成后在src目录下会生成 background.ts 文件(electron入口文件),通过package.json中的"main": "background.js"引入。
package.json 的 scripts 中自动生成electron运行及打包指令
4、更换electron版本(可选)
如果想要更换electron版本,可以重新选择指定版本进行安装
只需将 electron 版本号手动更改为目标版本号后,执行 npm install 重新安装依赖即可,完成后查看当前项目内electron版本号(npm ls electron),可以看到已经更换过来了。
5、运行项目
npm run electron:serve
6、如果运行过程出现的报错及解决方案
①、ts-loader 报错
这是由于 ts-loader 版本过高,在 package-lock.json 中发现当前 ts-loader 版本为 ^9.2.5,只需在 package.json 中固定版本,重新更新依赖,即可成功运行项目
②、Vue Devtools 未成功安装(由于网络问题)
解决方案有两种:
A: 不需要调试工具的情况下,直接将 background.ts 中的引入及引用去掉即可:
import installExte