Vercel多目录URL的Vanilla JS SPA路由问题求助

核心问题分析 #

刷新二级路由时静态资源返回index.html，根源在于两点：

1. 静态资源使用相对路径（如./assets/image.jpg），浏览器会从当前二级路由路径下去请求资源（比如/projects/home/assets/image.jpg），而非网站根路径。
2. 之前的vercel.json重写规则过于宽泛，把所有请求（包括静态资源）都指向了index.html。

步骤1：配置正确的vercel.json #

在项目根目录创建或修改vercel.json，添加以下规则，区分静态资源和SPA路由：

{
  "routes": [
    // 优先匹配静态资源，直接返回对应文件
    { "src": "/(.*\\.(css|js|jpg|png|svg|ico|woff2|woff|ttf))$", "dest": "/$1" },
    // 非静态资源请求，重写到index.html交给SPA路由处理
    { "src": "/.*", "dest": "/index.html" }
  ]
}

这个配置的逻辑是：先判断请求是否为指定后缀的静态资源，若是则直接返回文件；否则将请求转发到index.html，由你的Vanilla JS路由接管。

步骤2：修正静态资源路径 #

把项目中所有静态资源的引用改为绝对路径：

• 错误写法：./css/main.css、../assets/avatar.jpg
• 正确写法：/css/main.css、/assets/avatar.jpg
  这样无论当前处于哪个路由层级，浏览器都会从网站根路径请求静态资源，避免路径错误。

验证操作 #

1. 将修改后的vercel.json和静态资源路径提交到GitHub仓库
2. 等待Vercel自动重新部署，或手动触发部署
3. 测试二级路由的刷新、新标签打开、直接访问功能，确认静态资源正常加载

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