如何解决yarn install时Electron v7.3.3 darwin-arm64包404错误？

我用Quasar和Vue.js开发Web应用，执行yarn install后，除Electron外其他依赖都安装成功，但出现报错：请求https://github.com/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip返回404（Not Found），导致@vue/devtools依赖的Electron安装失败。

项目依赖配置 #

"dependencies": {
    "@quasar/extras": "^1.0.0",
    "apexcharts": "^3.37.1",
    "axios": "^0.21.1",
    "bignumber.js": "^9.1.1",
    "core-js": "^3.6.5",
    "laravel-echo": "^1.15.0",
    "lottie-web-vue": "^1.2.0",
    "pusher-js": "^8.0.1",
    "quasar": "^1.0.0",
    "sweetalert2": "^11.1.4",
    "vue-apexcharts": "^1.6.2",
    "vue-i18n": "^8.0.0",
    "vue-sweetalert2": "^5.0.2",
    "vuedraggable": "^2.24.3"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "@quasar/quasar-app-extension-qcalendar": "^3.4.1",
    "@quasar/quasar-app-extension-qmediaplayer": "^1.4.1",
    "@quasar/quasar-app-extension-qpdfviewer": "^1.0.0-beta.9",
    "@vue/devtools": "^5.3.4",
    "babel-eslint": "^10.0.1",
    "devtron": "^1.4.0",
    "electron": "^9.0.0",
    "electron-debug": "^3.0.1",
    "electron-devtools-installer": "^3.0.0",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.7.0",
    "eslint-webpack-plugin": "^2.4.0"
  },

完整错误日志 #

error /Users/.../PROJECT_NAME/node_modules/@vue/devtools/node_modules/electron: Command failed.
Exit code: 1
Command: node install.js
Arguments: 
Directory: /Users/.../PROJECT_NAME/node_modules/@vue/devtools/node_modules/electron
Output:
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

GotError [HTTPError]: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip
    at EventEmitter.<anonymous> (/Users/.../PROJECT_NAME/node_modules/got/source/as-stream.js:35:24)
    at EventEmitter.emit (node:events:513:28)
    at module.exports (/Users/.../PROJECT_NAME/node_modules/got/source/get-response.js:22:10)
    at ClientRequest.handleResponse (/Users/.../PROJECT_NAME/node_modules/got/source/request-as-event-emitter.js:155:5)
    at Object.onceWrapper (node:events:628:26)
    at ClientRequest.emit (node:events:525:35)
    at ClientRequest.origin.emit (/Users/.../PROJECT_NAME/node_modules/@szmarczak/http-timer/source/index.js:37:11)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (node:_http_client:693:27)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17)
    at TLSSocket.socketOnData (node:_http_client:534:22) {
  host: 'github.com',
  hostname: 'github.com',
  method: 'GET',
  path: '/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip',
  socketPath: undefined,
  protocol: 'https:',
  url: 'https://github.com/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip',
  gotOptions: {
    path: '/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip',
    protocol: 'https:',
    slashes: true,
    auth: null,
    host: 'github.com',
    port: null,
    hostname: 'github.com',
    hash: null,
    search: null,
    query: null,
    pathname: '/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip',
    href: 'https://github.com/electron/electron/releases/download/v7.3.3/electron-v7.3.3-darwin-arm64.zip',
    retry: {
      retries: [Function (anonymous)],
      methods: Set(6) { 'GET', 'PUT', 'HEAD', 'DELETE', 'OPTIONS', 'TRACE' },
      statusCodes: Set(7) { 408, 413, 429, 500, 502, 503, 504 },
      errorCodes: Set(8) {
        'ETIMEDOUT',
        'ECONNRESET',
        'EADDRINUSE',
        'ECONNREFUSED',
        'EPIPE',
        'ENOTFOUND',
        'ENETUNREACH',
        'EAI_AGAIN'
      }
    },
    headers: {
      'user-agent': 'got/9.6.0 (https://github.com/sindresorhus/got)',
      'accept-encoding': 'gzip, deflate'
    },
    hooks: {
      beforeRequest: [],
      beforeRedirect: [],
      beforeRetry: [],
      afterResponse: [],
      beforeError: [],
      init: []
    },
    decompress: true,
    throwHttpErrors: true,
    followRedirect: true,
    stream: true,
    form: false,
    json: false,
    cache: false,
    useElectronNet: false,
    method: 'GET'
  },
  statusCode: 404,
  statusMessage: 'Not Found',
  headers: {
    server: 'GitHub.com',
    date: 'Tue, 15 Aug 2023 15:02:38 GMT',
    'content-type': 'text/plain; charset=utf-8',
    vary: 'X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With',
    'cache-control': 'no-cache',
    'strict-transport-security': 'max-age=31536000; includeSubdomains; preload',
    'x-frame-options': 'deny',
    'x-content-type-options': 'nosniff',
    'x-xss-protection': '0',
    'referrer-policy': 'no-referrer-when-downgrade',
    'content-security-policy': "default-src 'none'; base-uri 'self'; connect-src 'self'; form-action 'self'; img-src 'self' data:; script-src 'self'; style-src 'unsafe-inline'",
    'content-encoding': 'gzip',
    'content-length': '29',
    'x-github-request-id': '1D8C:4E20:1B8B:279A:64DB938E',
    connection: 'close'
}

解决方案 #

原因分析 #

Electron v7.3.3发布时Apple Silicon芯片尚未普及，官方未提供darwin-arm64架构的安装包。你的环境是Apple Silicon（M系列芯片），安装脚本自动尝试下载对应架构的包，因此触发404错误。

修复步骤 #

方法一：升级@vue/devtools

当前使用的@vue/devtools@5.3.4依赖老旧的Electron v7，升级到最新版本（v6及以上），其依赖的Electron版本已支持Apple Silicon：

yarn upgrade @vue/devtools --latest

方法二：强制指定Electron架构

若不想升级依赖，可在安装时强制指定x64架构，通过Rosetta转译运行：

# 临时设置环境变量后执行安装
export npm_config_arch=x64
yarn install

也可将该配置写入.npmrc或.yarnrc实现永久生效：

# .npmrc文件中添加
arch=x64

方法三：锁定Electron版本

在package.json中添加resolutions字段，强制@vue/devtools使用项目已指定的Electron v9.0.0（该版本支持darwin-arm64）：

"resolutions": {
  "@vue/devtools/electron": "^9.0.0"
}

添加后重新执行yarn install即可。

内容的提问来源于stack exchange，提问作者Alexis España