这里写自定义目录标题
- 前言
- 实现方式
- 实现过程
前言
🔥🔥🔥Electron作为一个跨平台的构建工具，可以让我们实现快速构建桌面应用，给前端开发带来了巨大的便利。相信使用过Electron，都会面临这么一个问题：需要跨平台构建相关的应用程序。但是Electron明确的表明，构建MacOS的应用，应该在MacOS系统内，这就给我们造成了困扰，要是没有MacOS系统呢？难道我们就不做了吗？
✨✨✨这篇文章就是本着解决跨端构建的问题的，好东西要分享，不是吗？
实现方式
本文将着重说明在window平台下，构建MacOS的dmg格式安装包
electron-vite：2.3.0
vue：3.4.30
作为一个开发，github总是了解的吧，那github action应该也是了解的吧😀
主要的方式就是借用github action强大的CI/CD, 通过编写工作流，在我们提交代码时，执行相关的打包命令实现我们的跨平台构建流程。
实现过程
其它过程按照正常开发流程即可，主要就是一个工作流脚本,在项目的根目录下创建workflows的脚本，当我们代码提交至github仓库时会自动触发工作流脚本并执行
# .github/workflows/build-macos.ymlname: Build macOS Appon:# 当推送获取拉取时触发工作流 push:branches:- mainpull_request:branches:- mainjobs:build-macos:# 指定编译环境: macos-latest | ubuntu-latestruns-on: macos-lateststeps:# 检出当前仓库的所有代码- name: Checkout codeuses: actions/checkout@v2# 安装node环境- name: Set up Node.jsuses: actions/setup-node@v2with:# 指定具体的node版本node-version: '20.18.0'# 安装项目相关依赖包- name: Install dependenciesrun: npm ci# 执行构建相关命令- name: Build Electron apprun: npm run build:mac- name: Upload artifactuses: actions/upload-artifact@v2with:name: macos-dmgpath: dist/mac/*.dmg除此之外，github action 提供了很多的命令，有需求可以自行去官方文档查看
