部署MERN栈应用至Vercel时遇错误，请求协助排查

问题分析 #

部署后出现两个核心错误：

• 访问时：ENOENT: no such file or directory, stat '/var/task/frontend/build/index.html'
• 构建日志：Error: No Output Directory named "build" found after the Build completed

说明Vercel构建过程中未成功生成或定位到前端build目录，即便本地存在该目录，也可能因Git忽略规则、构建配置缺失等问题导致服务器端无法获取。

解决方案 #

1. 修正Vercel构建配置 #

当前vercel.json的静态构建规则缺少明确的前端构建触发逻辑，Vercel无法自动进入frontend目录执行依赖安装与构建操作。更新vercel.json如下：

{
    "version": 2,
    "name": "amazone",
    "builds": [
      { "src": "backend/server.js", "use": "@vercel/node" },
      { 
        "src": "frontend/package.json", 
        "use": "@vercel/static-build", 
        "config": { 
          "command": "cd frontend && npm install && npm run build",
          "distDir": "./frontend/build" 
        } 
      }
    ],
    "routes": [
      { "src": "/api/(.*)", "dest": "backend/server.js" },
      { "src": "/(.*)", "dest": "/frontend/build/$1" }
    ]
  }

关键修改：

• 添加command字段，强制Vercel进入frontend目录完成依赖安装与构建
• 明确distDir为相对根目录的./frontend/build
• 路由规则中dest路径前添加斜杠，确保Vercel从根目录寻址

2. 确认前端构建脚本有效性 #

检查frontend/package.json的build命令是否正确（以Create React App为例）：

{
  "scripts": {
    "build": "react-scripts build",
    // 其他脚本...
  }
}

若使用Vite等其他框架，需对应修改build命令（如"build": "vite build"），并将distDir调整为框架默认输出目录（如./frontend/dist）。

3. 保留Git忽略规则 #

确保frontend/.gitignore中保留build目录的忽略规则，不要将本地build目录提交到Git。Vercel会在构建时自动生成生产环境的build文件，本地build可能存在环境差异。

4. 验证Vercel项目设置 #

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

• 确认Output Directory字段留空，避免覆盖vercel.json配置
• 确保Build Command字段未手动设置，让vercel.json的构建规则生效

5. 重新部署并检查日志 #

触发重新部署后，在Vercel构建日志中查找以下内容，确认前端构建成功：

Running "cd frontend && npm install && npm run build"
...
Creating an optimized production build...
Compiled successfully.

额外排查点 #

对比之前成功部署的项目，检查：

• 两个项目的vercel.json是否存在细微差异（如command字段、distDir路径）
• 前端框架版本是否一致，部分版本更新会改变输出目录结构

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