向vue中集成electron(使用electron-builder插件直接将electron集成到自己的项目)



前言

一个完整的解决方案,用于打包和构建适用于 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失败的原因,只需要注释掉相关的代码就不会出现上面的错误了。
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45787691/article/details/126588105