Vercel生产环境中fetch JSON返回HTML问题求助

问题根源 #

1. 静态资源路径错误：本地开发时Vite的Dev Server可以访问/src下的文件，但生产构建后src目录不会被打包到部署产物中，直接请求/src/data/dishes.json在生产环境找不到对应文件。
2. Rewrite规则覆盖静态请求：你的vercel.json把所有请求都重写到根目录的index.html，导致JSON请求被拦截，返回了HTML内容。

解决方案 #

1. 调整静态文件存放位置 #

将src/data/dishes.json移动到项目根目录的public/data/目录下（如果public/data不存在就新建）。Vite会把public目录下的文件原封不动复制到生产构建的根目录，确保静态资源能被正确访问。

2. 修改Fetch请求路径 #

把代码中的请求路径从：

const response = await fetch('/src/data/dishes.json');

改为：

const response = await fetch('/data/dishes.json');

3. 更新Vercel重写规则 #

修改vercel.json，先匹配静态资源请求并直接返回文件，再处理SPA路由的重写：

{
  "rewrites": [
    {
      "source": "/(.*\\.(json|js|css|png|jpg|jpeg|gif|svg|ico)$)",
      "destination": "/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

这个规则会优先让.json、.js等静态资源请求直接访问对应文件，不会被重写到HTML，同时保留SPA路由的兜底重写。

验证步骤 #

1. 本地运行项目，确认修改后的fetch请求能正常获取JSON数据。
2. 重新构建并部署到Vercel，查看网络面板，确认/data/dishes.json请求返回正确的JSON内容而非HTML。

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