electron 环境下 canvas 安装错误

Question

现象

安装依赖 canvas 后，使用 electron-builder 的命令 install-app-deps 会出现

    node-pre-gyp info using node-pre-gyp@0.11.0
    node-pre-gyp info using node@12.18.2 | win32 | x64
    node-pre-gyp WARN Using request for node-pre-gyp https download
    node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v10.1-win32-unknown-x64.tar.gz
    node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v10.1-win32-unknown-x64.tar.gz
    node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v10.1-win32-unknown-x64.tar.gz
    node-pre-gyp WARN Pre-built binaries not found for canvas@2.6.1 and electron@10.1.0 (electron-v10.1 ABI, unknown) (falling back to source compile with node-gyp)
    node-pre-gyp http 404 status code downloading tarball https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v10.1-win32-unknown-x64.tar.gz

复现步骤

1. 初始化项目
2. 安装依赖 yarn add canvas
3. 运行 yarn install-app-deps

可复现 GitHub 仓库

相关问题

• 链接 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v10.1-win32-unknown-x64.tar.gz 确实是 404，不是网络问题
• node-canvas-prebuilt 的发布目录确实没有 canvas-v2.6.1-electron-v10.1-win32-unknown-x64.tar.gz
• 有人提出了问题，但没有真正被解决。。。官方提出的一个解决方案是从 node-canvas 进行构建，参考：https://github.com/node-gfx/node-canvas-prebuilt/issues/9

Answer 1

https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-electron-v13.6-win32-unknown-x64.tar.gz确实是404,且2.7.0以下已经不受支持,请有条件的去官网查看,网址https://github.com/Automattic/node-canvas/releases?page=2

所以请升级到2.7.0以上,笔者使用的2.9.3,真正的下载地址为https://github.com/Automattic/node-canvas/releases/download/v2.9.3/canvas-v2.9.3-node-v83-win32-unknown-x64.tar.gz,此链接可以从官网的下载列表中查看对应的版本

找到真正的下载地址后,在项目先npm install 出现canvas失败之后,去node_modules下寻找canvas文件夹,找到package.json文件修改装载的链接

如图修改_resolved值为正确链接,修改package_name为正确后缀,之后再次npm install

成功.(注意:github访问不了此操作可能失败)