Vercel部署Vite+React+Express项目：vercel.json配置冲突问题

针对Vite+React+Express部署Vercel时的路由与静态资源加载矛盾问题，调整vercel.json配置即可解决，核心是优先匹配静态资源，再处理API和SPA路由，同时确保Vite构建产物被正确识别：

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist",
        "installCommand": "npm install",
        "buildCommand": "npm run build"
      }
    },
    {
      "src": "server.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "/server.ts" },
    { "src": "/(.*\\.(js|css|png|jpg|jpeg|svg|ico|woff|woff2))$", "dest": "/dist/$1" },
    { "src": "/(.*)", "dest": "/dist/index.html" }
  ]
}

关键调整说明 #

• 静态资源优先匹配：新增的路由规则会先拦截所有带后缀的静态资源（JS/CSS/图片等），直接指向dist目录下的对应文件，避免被SPA重写规则拦截导致资源加载失败。
• 明确构建流程：在static-build配置里显式指定安装和构建命令，确保Vercel严格执行npm run build生成dist目录，杜绝零配置下的流程偏差。
• SPA路由指向正确路径：最后把所有非API、非静态资源的请求导向dist/index.html，保证React Router能正常接管客户端路由，解决刷新404问题。

额外注意事项 #

• 确认vite.config.ts中未修改base路径，保持默认base: '/'即可适配Vercel部署。
• 检查server.ts内所有API路由均以/api开头，与vercel.json中的API规则匹配。
• 在Vercel控制台手动清理构建缓存后重新部署，避免旧配置残留影响结果。

验证步骤 #

1. 替换上述vercel.json配置
2. 提交代码触发Vercel自动构建
3. 访问客户端路由并刷新，确认页面正常加载
4. 查看浏览器网络标签，确保JS/CSS资源返回200状态码

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