本地一切正常,推到 Vercel 却爆炸。这个“神秘”的 stylus@0.62.0 让我抓狂了半天,直到找到关键一招。特此记录,供后来者参考。


背景

我在部署 Hexo 博客时使用了 Vercel 做自动构建部署,项目使用了 Stylus 渲染器 hexo-renderer-stylus,间接依赖了 stylus 这个包。

本地一切正常,运行 npm install 后项目可以顺利生成、部署。

然而,当我把代码推到 Vercel,触发自动构建时却报错了


报错详情

Vercel 构建日志中出现如下错误:


npm error code ETARGET
npm error notarget No matching version found for stylus@^0.57.0.

或者:


error An unexpected error occurred: "[https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz](https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz): Request failed "404 Not Found""


迷惑点一:尝试更换 stylus 版本也失败了!

一开始看到 stylus@^0.57.0 报错,我第一反应是这个版本可能不存在,于是手动将其改为一个官网存在的版本,比如:

"stylus": "0.55.0"

结果运行 npm install 时却又报错:

Integrity check failed for "stylus"

我尝试切换源、清除缓存都无效,还以为是我本地有问题。

于是我尝试将版本改为:

"stylus": "0.62.0"

这次本地终于能安装成功了,但当我再次部署到 Vercel 时,又收到了新的错误:

404 Not Found: https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz

更迷惑的是,我还能手动访问这个链接,.tgz 文件下载也是正常的。

最后甚至尝试将构建流程从 npm 切换为 yarn,也没有解决问题。


迷惑点二:我本地安装完全没问题

我运行:

npm view stylus versions

输出中确实包含:

"0.62.0", "0.63.0", "0.64.0"

也就是说 stylus@0.62.0 是 NPM 正式版本,并没有被撤回或删除。

我还亲自访问:

https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz

下载 .tgz 文件是正常的,说明这个版本确实存在。

但 Vercel 构建时却说 404,怎么回事?


迷惑点三:Stylus 的版本是怎么跑出来的?

在我的 package.json 中并没有直接写:

"stylus": "^0.62.0"

但通过 npm ls stylus 我发现:

hexo-renderer-stylus@2.0.0
└── stylus@0.62.0

也就是说,是 hexo-renderer-stylus 间接依赖了 stylus,并且 lock 文件中被锁定到了 0.62.0


问题根源:Vercel 构建环境使用了“镜像源”

本地用的是官方源 https://registry.npmjs.org,而 Vercel 默认构建环境可能使用的是:

  • https://registry.yarnpkg.com
  • https://registry.npmmirror.com(淘宝源)

这些镜像有时:

  • 数据同步滞后;
  • .tgz 文件存在但元数据签名不匹配;
  • 或 registry cache 出错;

导致无法正常解包或通过完整性校验

哪怕我本地一切正常,CI/CD 环境里照样可能炸。


✅ 解决方案:设置环境变量强制使用官方源

最终,我在 Vercel 项目的设置中添加了一个环境变量:

KeyValue
NPM_CONFIG_REGISTRYhttps://registry.npmjs.org

路径:Vercel → 项目 → Settings → Environment Variables

然后重新部署,立刻就构建成功 ✅!


附加建议:如何避免类似问题?

✅ 1. 明确锁定 Stylus 的版本

package.json 中写明:

"stylus": "0.55.0"

或使用 Yarn 的 resolutions

"resolutions": {
"stylus": "0.55.0"
}

然后删除 lock 文件并重新安装依赖。


✅ 2. 始终使用官方源

建议在根目录加入 .npmrc

registry=https://registry.npmjs.org

.yarnrc.yml

npmRegistryServer: "https://registry.npmjs.org"

✅ 3. 提交 lock 文件到仓库

不提交 package-lock.jsonyarn.lock,就等于放弃了对依赖树的控制。强烈建议加入 Git 版本控制,确保本地与构建环境一致。


结语

这次构建失败问题看似小,实则踩坑不少。

不要轻信 CDN 镜像的“可访问性”,能下载并不代表构建时就能用。

也提醒我:CI/CD 构建不是简单地“npm install 一遍”,环境一致性、镜像源、依赖锁定,缺一不可

希望这篇文章能帮到正在被 stylus@0.62.0 或类似构建问题折磨的你 🙌

欢迎留言交流,如果你也踩过类似的坑,欢迎分享你的故事!