掌握Electron工具链：在Windows操作系统上无缝开发MacOS软件

这里写自定义目录标题

• • 前言
  • 实现方式
  • 实现过程

前言

🔥🔥🔥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.yml

name: Build macOS App

on:
  # 当推送获取拉取时触发工作流	
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-macos:
  	# 指定编译环境: macos-latest | ubuntu-latest
    runs-on: macos-latest

    steps:
    	# 检出当前仓库的所有代码
      - name: Checkout code
        uses: actions/checkout@v2
		
		# 安装node环境
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          # 指定具体的node版本
          node-version: '20.18.0'

		# 安装项目相关依赖包
      - name: Install dependencies
        run: npm ci

		# 执行构建相关命令
      - name: Build Electron app
        run: npm run build:mac

      - name: Upload artifact
        uses: actions/upload-artifact@v2
        with:
          name: macos-dmg
          path: dist/mac/*.dmg
          

除此之外，github action 提供了很多的命令，有需求可以自行去官方文档查看