Vercel部署全栈React应用提示缺失build目录的解决咨询

问题描述 #

部署Node.js后端+React前端的全栈应用到Vercel时，持续出现以下错误：

Error: No Output Directory named "build" found after the Build completed. You can configure the Output Directory in your Project Settings.

已配置vercel.json文件，前端package.json中包含react-scripts build命令，本地执行npm run build能正常生成build文件夹，但Vercel部署仍失败。

相关配置如下：

当前vercel.json配置 #

{
    "builds": [
        {
            "src": "backend/app.js",
            "use": "@vercel/node"
        },
        {
            "src": "frontend/package.json",
            "use": "@vercel/static-build",
            "config": {
                "distDir": "frontend/build"  // This is where your build folder is located
            }
        }
    ],
    "routes": [
        {
            "src": "/api/(.*)",
            "dest": "/backend/app.js"
        },
        {
            "src": "/(.*)",
            "dest": "/frontend/build/$1"
        }
    ]
}

前端package.json的scripts部分 #

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

解决步骤 #

1. 修正vercel.json中的distDir配置 #

@vercel/static-build在处理前端项目时，会自动进入frontend目录执行构建命令，因此distDir需要填写相对于前端目录的路径，而不是项目根目录的绝对路径。将distDir的值改为build即可：

修改后的vercel.json构建片段：

{
    "builds": [
        {
            "src": "backend/app.js",
            "use": "@vercel/node"
        },
        {
            "src": "frontend/package.json",
            "use": "@vercel/static-build",
            "config": {
                "distDir": "build"
            }
        }
    ],
    // routes部分保持不变
}

2. 配置根目录package.json（可选但推荐） #

如果项目根目录没有package.json，创建一个统一的构建脚本，确保Vercel能正确安装前端依赖并执行构建：

{
    "scripts": {
        "build": "cd frontend && npm install && npm run build"
    }
}

这样Vercel会自动在根目录执行npm run build，按顺序完成前端的依赖安装和构建流程。

3. 调整Vercel项目的构建设置 #

进入Vercel项目的Settings → Build & Development Settings：

• 在Output Directory中填写frontend/build（对应项目根目录下的前端构建产物路径）
• 确保Build Command设置为npm run build（或留空让Vercel自动识别）

4. 清理缓存重新部署 #

Vercel的缓存可能残留旧配置，部署时选择Clear Cache & Redeploy，确保新配置完全生效。

5. 确认目录结构正确性 #

确保你的项目目录结构符合以下格式，避免路径识别错误：

your-project/
├── backend/
│   └── app.js
├── frontend/
│   ├── package.json
│   └── build/ （本地构建生成的目录）
├── vercel.json
└── package.json （可选，根目录构建脚本）

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