由于工作需求变更现需将web端的项目,转成C端(俺们不会啊,看大家都用electron就现学呗)
前言
看了很多相关的帖子
- 在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法
- 开箱即用,Electron+Vue-element-admin桌面客户端
- 最简洁Vue+Electron项目搭建教程
...
看了很多帖子说win和mac好像还不一样
然后我自己用的是mac
抉择
选择放弃:怪我太笨(从头学)
以下为MAC学习-WIN的有错我不管
开始
这里通过这个文章走了捷径Electron + Vue3 + Vite + TS 实战探索
1-部署
- electron-forge
- electron-builder
- electron-packager
这里的
electron-forge看的出来维护的很勤快,但有个问题就是很多坑等着你去踩 我的选择是electron-builder
2-新建项目
- 按照官网的去写学习项目入手
- 然后安装electron-builder进项目
2-1-这里有个坑其实也不算坑
这里使用electron-builder去打包
这里的download会卡很久,不要着急原因来了,因为下载很慢,试过vpn一样的所以就等呗
具体为什么要下载呢?
官方的github
我到这里就停住了,因为问题以及解决了,想要深入了解的请随意。
3-打包成mac的安装包
因为没有全局安装electron和electron-builder所以,
// package.json
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
执行完成后,项目列表小面就会出现dist
然后点开dmg的文件就完成
3-1成果展示
3-2 打成pkg的包效果
至此,一个简单的打包流程就过了,现在看看怎么把项目套进去;vue里面2和3在electron转中还很多不一样
3-3 打包的一个坑
由于之前试过封装的打包以为按照
electron-builder的去配置好就会自动打包所有的平台,结果就只打包出mac的。 解决: 多声明几个打包命名
// package.json
"dist-win32": "electron-builder --win --ia32",
"dist-win64": "electron-builder --win --x64",
"dist-mac": "electron-builder --mac"
4-打包成win的安装包
执行3-3中的 npm run dist-win64
4-1成果展示
4-2打包的一个坑
报错截图:
对着百度一顿搜猜测是图标原因
抱着试一试的态度改了后缀,问题就解决了。
5-发布
现在完成了打包,那么接下来就是怎么生成链接,让别人能够在网上下载它 我这边就直接使用nginx进行的部署