搭建一个Electron跨平台桌面应用程序

准备

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 中的引入及引用去掉即可：