Mac M1环境下执行npm run electron:serve无法启动Electron问题求助

1. 明确Electron架构适配配置 #

M1为arm64架构，需在配置中明确指定兼容架构：

• 在package.json的build字段中补充：

"build": {
  "mac": {
    "target": {
      "target": "default",
      "arch": ["arm64", "x64"]
    }
  }
}

• 在vue.config.js中添加对应配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        mac: {
          arch: ['arm64', 'x64']
        }
      }
    }
  }
}

2. 强制安装arm64版本的Electron #

避免npm默认拉取x64版本，执行以下命令重新安装：

npm install --arch=arm64 electron@12.2.3

或先设置环境变量再清理重装：

export npm_config_arch=arm64
rm -rf node_modules package-lock.json
npm install

3. 开启IDE终端的Rosetta兼容模式 #

IntelliJ IDEA终端未启用Rosetta可能引发架构不兼容：

1. 找到IntelliJ IDEA应用，右键选择「显示简介」
2. 勾选「使用Rosetta打开」，重启IDE后再执行npm run electron:serve

4. 查看Electron启动日志定位错误 #

输出详细日志排查具体问题：

DEBUG=electron* npm run electron:serve

或在vue.config.js中开启调试日志：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      debug: true
    }
  }
}

根据日志中的报错（如依赖缺失、权限问题）针对性修复。

5. 排查第三方依赖的架构兼容性 #

部分旧依赖可能不支持arm64：

• 通过npm ls查看依赖树，检查是否有依赖仍依赖旧版Electron或非arm64原生模块
• 更新或替换不兼容的依赖，优先选择明确支持arm64的版本

6. 清理Electron相关缓存 #

缓存冲突可能导致启动失败，执行以下命令清理：

rm -rf ~/.electron
rm -rf ~/.cache/electron-builder

之后重新安装依赖并启动项目。

内容的提问来源于stack exchange，提问作者StepFH