布莱恩喵
折腾笔记已复盘

Vercel 部署出问题时,我现在不会先乱改配置

本地能跑、线上失败时,最容易做错的是凭感觉乱改。更稳的方式是先看项目设置、构建命令、输出目录、Node.js 版本和部署日志。

Vercel部署Web 开发排障

本地网站能跑,Vercel 上线后却没样式或构建失败,这种问题最容易让人手忙脚乱。

我现在的原则是:不要先改代码,先查部署链路。

为什么容易误判

前端部署失败时,表面现象很像代码问题。比如页面能打开但 CSS 丢了,第一反应会是样式没打包;构建日志有 warning,第一反应会是依赖坏了。

但真正原因可能在 Vercel 项目设置里:Framework Preset、Build Command、Output Directory、Install Command、Node.js Version,任何一处和项目实际结构不一致,都会让线上表现和本地不一样。

我的排查顺序

第一步看项目设置。

确认框架识别是否正确,构建命令是不是项目实际使用的命令,输出目录有没有被手动写错。很多静态资源问题不是代码没生成,而是 Vercel 去了错误的输出目录找文件。

第二步看环境。

Node.js 版本尤其要看。项目里的 engines、Vercel 控制台里的 Node.js Version、构建日志里实际使用的版本,三者可能不一致。日志里如果提示某个设置不会生效,就应该先解释这个 warning。

第三步看最新部署的 Source。

确认它部署的是不是最新 commit。很多时候人已经 push 了新代码,但线上失败看的还是旧提交。

第四步看 Build Logs。

不要只看最后一行错误。应该确认实际运行了什么命令、是否生成了 CSS/静态资源、有没有明显的路径或依赖 warning。

这件事给我的提醒

部署排障不是猜谜。它更像对账:本地项目结构、Vercel 项目设置、构建日志、输出结果要能对上。

如果这四个地方对不上,继续改代码只会扩大混乱。

所以我现在会先把控制台当检查清单,而不是把它当最后才看的黑盒。线上问题先证据,后动作。