Vercel重写规则下应用资源加载失败（HTTP 404）如何解决？

核心原因 #

当前重写规则仅转发了/projects/<SideProjectName>的HTML请求，但静态资源（如assets下的CSS/JS）请求会直接指向RootApp的部署目录，而RootApp中不存在这些资源，因此返回404。需要让所有子路径请求都被正确转发到SideProject的Vercel地址。

具体配置步骤 #

1. 更新RootApp的vercel.json重写规则 #

修改配置，让通配符匹配/projects/<SideProjectName>下的所有子路径，确保静态资源请求也能被转发：

{
  "rewrites": [
    {
      "source": "/projects/<SideProjectName>/:path*",
      "destination": "https://<SideProject-Vercel-Domain>/:path*"
    }
  ]
}

其中:path*会匹配/projects/<SideProjectName>之后的任意路径（包括/assets/xxx.js这类资源路径），并将对应路径部分转发到SideProject的Vercel域名。

2. 确认SideProject的Vite配置正确性 #

确保vite.config.js中的base设置末尾带斜杠，保证打包后的资源引用路径前缀正确：

export default defineConfig({
  base: '/projects/<SideProjectName>/',
  // 其他Vite配置项...
})

3. 重新部署应用 #

• 先重新部署SideProject，确保打包后的资源路径符合预期；
• 再重新部署RootApp，让新的vercel.json规则生效。

额外检查点 #

• 在RootApp的Vercel部署详情中，查看「Rewrites」标签，确认规则已正确应用；
• 若SideProject开启自动部署，修改配置后需手动触发一次重新构建，确保资源路径更新。

内容的提问来源于stack exchange，提问作者Nikita Yakunin