Vue3+Vercel Serverless API场景下vercel.json配置问题求助

直接使用以下配置即可同时解决SPA页面刷新404和API失效的问题：

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

配置说明及问题原因 #

• 最初的配置将所有请求直接转发到根路径，导致/api/*请求也被拦截，无法触发Vercel Serverless Functions。
• 你尝试的第二个配置错误在于，/api/(.*)的destination未保留捕获到的路径参数（即$1），所有/api下的请求都被转发到/api根路径，无法匹配到具体的函数文件，最终导致所有功能失效。

Vercel的rewrites规则是按顺序匹配，先处理/api开头的请求，让它们正常对应到对应的Serverless Functions，剩余所有请求再转发到Vue的SPA入口页面，这样既解决了非根路径刷新404的问题，又能保证API正常调用。

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