Vite React客户端在vercel dev部署中返回404错误的解决问询

问题原因 #

vercel dev在本地运行时，会同时启动Vite开发服务器和Vercel Serverless函数服务器，但你当前的vercel.json里的第二条重写规则：

{
  "source": "/(.*)",
  "destination": "/"
}

会把所有非/api开头的请求直接指向根路径，而vercel dev没有正确将这些请求转发给Vite的开发服务器，而是自行尝试处理，导致找不到客户端资源，触发404。而生产环境中Vercel会正确处理静态资源与重写逻辑，所以没有问题。

解决方案 #

方案一：仅在生产环境启用客户端重写 #

给重写规则添加环境条件，让客户端路由重写只在生产环境生效，本地开发时由Vite自行处理路由：

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

方案二：排除Vite开发相关路径 #

在重写规则里排除Vite开发时的特殊路径（比如/@vite/、静态资源路径等），避免这些请求被错误重定向：

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/",
      "condition": {
        "not": [
          { "source": "/@vite/(.*)" },
          { "source": "/assets/(.*)" },
          { "source": "/favicon.ico" }
        ]
      }
    }
  ]
}

方案三：Dev环境直接转发请求到Vite服务器 #

指定本地开发时，将客户端请求转发到Vite的本地服务端口（默认5173，根据你的Vite配置调整）：

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/$1"
    },
    {
      "source": "/(.*)",
      "destination": "http://localhost:5173/$1",
      "condition": {
        "env": {
          "VERCEL_ENV": "development"
        }
      }
    },
    {
      "source": "/(.*)",
      "destination": "/",
      "condition": {
        "env": {
          "VERCEL_ENV": "production"
        }
      }
    }
  ]
}

注意事项 #

修改完vercel.json后，重启vercel dev命令即可生效。同时确保Vite配置中没有冲突的代理设置，本地开发时Vite会自行处理静态资源与前端路由，vercel dev仅负责转发API请求和处理重写规则。

内容的提问来源于stack exchange，提问作者Dince-afk