work-electron

164 阅读2分钟

由于工作需求变更现需将web端的项目,转成C端(俺们不会啊,看大家都用electron就现学呗)

前言

看了很多相关的帖子

  1. 在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法
  2. 开箱即用,Electron+Vue-element-admin桌面客户端
  3. 最简洁Vue+Electron项目搭建教程 ...
    看了很多帖子说winmac好像还不一样
    然后我自己用的是mac

抉择

选择放弃:怪我太笨(从头学)

以下为MAC学习-WIN的有错我不管

开始

这里通过这个文章走了捷径Electron + Vue3 + Vite + TS 实战探索

1-部署

Electron官网的部署推荐

2-新建项目

  1. 按照官网的去写学习项目入手
  2. 然后安装electron-builder进项目

2-1-这里有个坑其实也不算坑

这里使用electron-builder去打包 image.png 这里的download会卡很久,不要着急原因来了,因为下载很慢,试过vpn一样的所以就等呗

image.png 具体为什么要下载呢? 官方的github

image.png 我到这里就停住了,因为问题以及解决了,想要深入了解的请随意。

3-打包成mac的安装包

因为没有全局安装electronelectron-builder所以,

// package.json
	"scripts": {
		"start": "electron .",
		"build": "electron-builder"
	},

执行完成后,项目列表小面就会出现dist

image.png 然后点开dmg的文件就完成

3-1成果展示

image.png

image.png

image.png

3-2 打成pkg的包效果

image.png 至此,一个简单的打包流程就过了,现在看看怎么把项目套进去;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成果展示

image.png

4-2打包的一个坑

报错截图:

image.png 对着百度一顿搜猜测是图标原因

image.png 抱着试一试的态度改了后缀,问题就解决了。

5-发布

现在完成了打包,那么接下来就是怎么生成链接,让别人能够在网上下载它 我这边就直接使用nginx进行的部署

image.png

参考mac环境下用electron-builder打包

参见

1.在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法
2.开箱即用,Electron+Vue-element-admin桌面客户端
3.最简洁Vue+Electron项目搭建教程
4.electron-builder Github
5.mac环境下用electron-builder打包
6electronjs
7electron-builder文档