部署MERN应用至Vercel时出现NOT FOUND错误求助

常见排查与修复步骤 #

1. 配置Vercel部署规则 #

如果Vercel未正确识别后端入口或路由规则，需在项目根目录创建vercel.json文件，指定服务入口和路由转发：

{
  "buildCommand": "npm run build",
  "functions": {
    "app.js": {
      "runtime": "@vercel/node@2.x"
    }
  },
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/app.js"
    }
  ]
}

• 若前端代码在子目录（如client），需确保package.json的build命令先完成前端构建：

"scripts": {
  "build": "cd client && npm install && npm run build",
  "start": "node app.js"
}

2. 修正Express静态文件服务配置 #

检查app.js中生产环境的静态文件路径是否正确，同时确保通配路由兜底返回前端index.html：

const path = require('path');
const express = require('express');
const app = express();

// 先定义API路由（必须在静态文件配置之前）
app.use('/api', require('./routes/api'));

// 生产环境托管静态文件
if (process.env.NODE_ENV === 'production') {
  // 替换为你的前端构建目录，比如client/build
  const staticPath = path.join(__dirname, 'client/build');
  app.use(express.static(staticPath));

  // 所有非API请求返回前端入口文件
  app.get('*', (req, res) => {
    res.sendFile(path.join(staticPath, 'index.html'));
  });
}

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

注意：Vercel环境中__dirname的路径逻辑与本地一致，避免路径拼接错误。

3. 确认Vercel环境变量 #

在Vercel项目的「Settings → Environment Variables」中添加：

• NODE_ENV=production
• 应用依赖的其他环境变量（如数据库连接字符串）

4. 检查构建日志 #

查看Vercel部署时的Build Logs，确认：

• 前端构建是否成功生成静态文件目录
• 后端依赖是否安装完整，无报错信息

5. 调整路由顺序 #

确保Express的API路由定义在静态文件服务和通配路由之前，避免API请求被前端路由拦截。

内容的提问来源于stack exchange，提问作者Shiv Shankar Prasad