Vercel 部署静态网站时出现样式丢失、脚本不执行、图片无法显示，通常是因为路由配置缺失导致资源请求被错误重定向至 index.html；本文详解通过 vercel.json 自定义路由规则解决该问题。
vercel 部署静态网站时出现样式丢失、脚本不执行、图片无法显示，通常是因为路由配置缺失导致资源请求被错误重定向至 index.html；本文详解通过 `vercel.json` 自定义路由规则解决该问题。
当你将纯静态 HTML 网站（如仅含 index.html、style.css、script.js 和 /img/ 资源）直接部署到 Vercel 时，Vercel 默认以 SPA（单页应用）模式处理所有请求：即未匹配的路径（包括 /style.css 或 /img/logo.png）都会 fallback 到 index.html。这会导致浏览器实际收到的是 HTML 内容，而非预期的 CSS/JS/图片文件——你可在浏览器开发者工具的 Network 面板中观察到：style.css 的响应状态为 200，但响应体却是 源码，Content-Type 也错误地显示为 text/html。
✅ 正确解法是显式声明静态资源路由，确保它们被准确映射到对应文件。在项目根目录创建 vercel.json 文件，并写入以下配置：
{
"routes": [
{ "src": "/style.css", "dest": "/style.css" },
{ "src": "/script.js", "dest": "/script.js" },
{ "src": "/img/(.*)", "dest": "/img/$1" },
{ "src": "/(.*)", "dest": "/index.html" }
]
}? 关键说明：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 路由规则按顺序匹配，*静态资源规则必须放在 `/(.)` 通配符之前**，否则会被兜底规则拦截；
- 正则捕获组
(.*)与$1实现路径透传（例如/img/avatar.jpg→/img/avatar.jpg）； - 若你有更多资源类型（如字体
.woff2、图标/favicon.ico），应一并添加对应规则，例如：{ "src": "/favicon.ico", "dest": "/favicon.ico" }{ "src": "/fonts/(.*)", "dest": "/fonts/$1" }
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保
vercel.json位于项目根目录（与index.html同级），且无语法错误（JSON 格式严格）； - 修改后需 重新部署（Vercel CLI 执行
vercel --prod或推送代码触发自动构建）； - 若仍不生效，请检查文件路径是否大小写一致（Linux 环境区分大小写）、HTML 中引用路径是否正确（如
<link rel="stylesheet" href="/style.css">，非./style.css或css/style.css且未配合<base>标签）； - 不要混淆
vercel.json与next.config.js——后者仅适用于 Next.js 应用，纯静态站点只需前者。
完成配置并重新部署后，刷新页面并检查 Network 面板：style.css、script.js 及图片请求应返回正确的 200 状态与对应 MIME 类型（如 text/css、application/javascript、image/png），网页样式与交互功能即可恢复正常。
