如何将含React+Vite前端与Express后端的单仓部署到同一Vercel项目

核心问题诊断 #

你的配置存在两个关键错误：

1. 构建器选型错误：客户端React+Vite应用属于静态站点，原配置中使用@vercel/node构建器完全不适配，该构建器用于Node.js函数而非静态资源编译。
2. 缺少构建指令：未告知Vercel如何执行Vite的构建流程，导致client/dist目录未生成，静态资源无法被路由匹配到。

修正方案 #

1. 更新项目根目录的package.json

添加全局构建脚本，确保Vercel部署时先编译客户端静态资源：

{
  "scripts": {
    "build": "cd client && npm install && npm run build",
    "dev": "concurrently \"cd server && npm run dev\" \"cd client && npm run dev\""
  }
}

同时确保client/package.json中存在正确的Vite构建命令：

{
  "scripts": {
    "build": "vite build"
  }
}

2. 替换正确的vercel.json配置

{
  "version": 2,
  "builds": [
    {
      "src": "server/index.ts",
      "use": "@vercel/node"
    },
    {
      "src": "client/package.json",
      "use": "@vercel/static",
      "config": {
        "distDir": "client/dist"
      }
    }
  ],
  "routes": [
    // 优先处理API路由
    {
      "src": "/api/(.*)",
      "dest": "/server/index.ts"
    },
    // 匹配带后缀的静态资源（如JS、CSS、图片）
    {
      "src": "/(.*\\..+)$",
      "dest": "/client/dist/$1"
    },
    // 所有其他路由指向SPA入口文件，适配React路由
    {
      "src": "/(.*)",
      "dest": "/client/dist/index.html"
    }
  ]
}

配置解释 #

• 构建规则：客户端使用@vercel/static构建器，关联client/package.json后，Vercel会自动执行其中的build命令生成dist目录；后端保持@vercel/node构建器处理API逻辑。
• 路由规则：
  • 先匹配所有/api/开头的请求，转发到Express服务；
  • 再匹配带文件后缀的静态资源，直接返回dist目录下的对应文件；
  • 最后将所有未匹配的请求指向index.html，解决React SPA的路由刷新404问题。

验证步骤 #

1. 推送更新后的配置到GitHub仓库；
2. 在Vercel控制台触发重新部署；
3. 查看部署日志，确认client目录的npm run build指令已执行且dist目录生成成功；
4. 访问部署地址，验证静态站点和API路由均正常工作。

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