electron 如何打包vue项目

记录一下自己踩到的坑, 避免更多人踩

① 确认node版本

首先需要版本号大于14.0.0的较新的node版本, 可以使用命令查看自己的版本

node -v

②创建演示项目

安装vue脚手架并创建演示项目, 选择 vue2

npm install - g @vue / cli
vue create electron_vue2

③配置环境变量

现在很多 网上教程配置的镜像地址已经失效了,使用旧的镜像地址是无法创建成功的, 打开C:\Users\Administrator下配置.npmrc文件

registry=https://npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

④添加打包工具

vue add electron-builder

如果安装失败检查一下自己的 ELECTRON_MIRROR 地址是否正确, 可以打开网址查看一下

⑤进行项目打包

npm run electron:build // 打包命令

如果出现404错误,就是镜像地址配错了

成功打包是 complete 的提示

如果你的node是18以上的版本可能会出现 unsupported 的错误, 这个错误是因为18版本以上的ssl证书要求不一样了

可以做一下配置, 在启动项前加上SET NODE_OPTIONS=--openssl-legacy-provider &&

再次运行, 打包成功

⑥启动

打开打包好的 dist_electron 文件夹, 点击exe程序安装

点击桌面应用程序即可看到效果