解决 npm install [email protected] 失败的问题

前言

项目中使用了 canvas npm包来实现 node 服务端数据成图的功能。但是在项目中使用 npm install 安装失败，经过各种和 AI 沟通的尝试后，终于指定版本的 canvas 安装成功，项目也运行成功，在此记录一下安装方法。

Linux 版

• 操作系统：CentOS 9
• node版本：v15.14.0
• npm版本：v7.7.6

安装 nodejs

1.官网下载二进制包

从 Node.js 官网 下载适用于 Linux 的二进制包。

2.上传到服务器并解压

将二进制包上传到服务器 /usr/local 目录下

// 解压
tar -xvf node-v15.14.0-linux-arm64.tar.xz

3.重命名

解压后在 usr/local 目录下会生成 node-v15.14.0-linux-arm64 文件夹，重命名为nodejs

// 解压
mv node-v15.14.0-linux-arm64 nodejs

4.设置环境变量

echo 'export PATH=/usr/local/nodejs/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

5.验证安装

node -v
npm -v

安装系统依赖（CentOS）

canvas 需要系统级图形库支持，使用Homebrew安装：

# x86_64
sudo dnf install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
# ARM64
sudo dnf install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel.aarch64

将 npm 镜像源更改为淘宝镜像源

# 查看当前配置
npm config get registry
# 设置为淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 恢复为官方镜像
npm config set registry https://registry.npmjs.org/

全局安装 node-gyp

node-gyp是一个Node.js的原生插件构建工具，用于编译C++扩展模块。很多Node.js模块，比如canvas，都包含C++代码，需要编译后才能在特定平台上运行。

npm install -g node-gyp

清除 npm 缓存并开始安装

# 清除npm缓存
npm cache clean --force
npm cache verify
# 删除指定文件
rm -rf node_modules package-lock.json
npm install

安装成功

执行 npm install 后，需要等待一会才会安装成功

Mac 版

• 操作系统：MacOS Sequoia 15.5
• node版本：v15.14.0
• npm版本：v7.7.6

安装系统依赖（macOS）

canvas 需要系统级图形库支持，使用Homebrew安装：

brew install pkg-config cairo pango libpng jpeg giflib librsvg

确保 Xcode 命令行工具已安装

xcode-select --install

将 npm 镜像源更改为淘宝镜像源

# 查看当前配置
npm config get registry
# 设置为淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 恢复为官方镜像
npm config set registry https://registry.npmjs.org/

全局安装 node-gyp

node-gyp是一个Node.js的原生插件构建工具，用于编译C++扩展模块。很多Node.js模块，比如canvas，都包含C++代码，需要编译后才能在特定平台上运行。

npm install -g node-gyp

清除 npm 缓存并开始安装

# 清除npm缓存
npm cache clean --force
npm cache verify
# 删除指定文件
rm -rf node_modules package-lock.json
npm install

安装成功

执行 npm install 后，需要等待10分钟左右才会安装成功，进程会卡在 core-js@2.6.12 处，如下图：

等待中截图

安装成功截图

Windows 版

• 操作系统：Windows 11
• node版本：v15.14.0
• npm版本：v7.7.6

安装 vscode

官网下载地址

将 npm 镜像源更改为淘宝镜像源

# 查看当前配置
npm config get registry
# 设置为淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 恢复为官方镜像
npm config set registry https://registry.npmjs.org/

全局安装 node-gyp

node-gyp是一个Node.js的原生插件构建工具，用于编译C++扩展模块。很多Node.js模块，比如canvas，都包含C++代码，需要编译后才能在特定平台上运行。

npm install -g node-gyp

清除 npm 缓存并开始安装

# 清除npm缓存
npm cache clean --force
npm cache verify
# 删除指定文件
rmdir /s /q node_modules && del /f /q package-lock.json
npm install

安装成功

执行 npm install 后，很快就安装成功了，不会像 Mac 端卡着。如下图：