---

---

前言

一个完整的解决方案，用于打包和构建适用于 macOS、Windows 和 Linux 的可分发 Electron 应用程序，并提供开箱即用的“自动更新”支持。

---

一、创建一个vue项目

项目创建可以参考之前的文章：https://blog.csdn.net/qq_45787691/article/details/125990536?spm=1001.2014.3001.5502

二、集成electron

1、输入vue add electron-builder，将我们的vue3项目变成一个vue3+electron的项目。

这里我们可以选择electron版本，这里我们选择的是13.0.0。
项目创建成功之后，package.json文件中会多出这些配置就表示electron集成成功。

三、运行项目

输入命令：npm run electron:serve

我们看到，报以下错误了：

这里是因为我们缺少了@vue/cli-service这个依赖，导致找不到该文件，我们只需要单独安装这个依赖就行。输入命令：npm i @vue/cli-service -D。
安装完成以后，重新运行项目，本以为就能成功运行了，结果却总是那么不尽人意，还是报错了：

报这样的错误大部分原因是安装的包，依赖版本之间冲突，这时只需要删除项目中的node_modules和package-lock.json，然后使用npm i 重新下载依赖就行。

然后重新运行项目，会发现又出现了一个新的错误：

这个错误大概的意思就是，我们必须按照ES Module的规范进行文件的导入，原因是我们项目文件中存在着不是用import进行导入的文件，这时只需要删掉package.json中的type=“module”即可。

然后运行项目，我们发现项目已经成功运行了：

但是我们发现终端中有一点小错误提示：

这是因为我们background.js中引入VUEJS3_DEVTOOLS失败的原因，只需要注释掉相关的代码就不会出现上面的错误了。