掌握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 提供了很多的命令，有需求可以自行去官方文档查看

原文地址：https://blog.csdn.net/glx490676405/article/details/143775824

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！