本地网站能跑,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 项目设置、构建日志、输出结果要能对上。
如果这四个地方对不上,继续改代码只会扩大混乱。
所以我现在会先把控制台当检查清单,而不是把它当最后才看的黑盒。线上问题先证据,后动作。