起因

换了台m1的macbook, 我之前的看板electron程序构建的还是老的x64版本，使用上还需要使用rosetta2进行转译，性能损失不说，说不定还有潜在的问题，所幸看到 electron11开始支持使用arm64芯片的mac了，正好升级一波

写在前面

目前工具库还在preview，taobao镜像不可用

顺带提一下我之前的项目结构

• 基于 @vue/cli4
• 使用 vue-cli-plugin-electron-builder (opens new window)注入的electron相关
• 构建流 本地正常构建，自动构建流基于samuelmeuli/action-electron-builder@v1自动构建
• 项目地址点击这里 (opens new window)

开工

升级依赖

首先需要升级使用的electron到支持新芯片的版本，目前能够使用的是electron11 (opens new window)

npm install --save electron@11

同时我们需要升级electron-builder到支持打包新芯片的版本, 根据最新的方案 (opens new window)，arch需要支持arm64并且可以打包dmg的话，需要升级到22.10.4

npm install --save-dev electron-builder@22.10.4

不过因为还在preview 只有npm官方仓库可以安装

接下来我们改造构建选项，因为我使用vue的插件, 所以我写在vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        artifactName: '${productName}-${version}-${os}-${arch}.${ext}',
        mac: {
          target: {
            arch: 'universal',
            target: 'dmg'
          }
        }
      },
    }
  }
}

这样可以打包一个自适应芯片的版本，当然你想打两个包可以把arch换成arch: ['x64', 'arm64']

没有使用vue插件的，直接在package.json里增加

{
  "build": {
    "mac": {
      "target": {
        "arch": "universal",
        "target": "dmg"
      }
    }
  }
}

最终

成功打出dmg，正常使用中

当然universal模式的大了100多m尽量还是按需打包把