Vercel部署MERN应用后端出现404错误求助

问题背景 #

正在Vercel部署MERN应用后端，此前用相同流程部署过小型todo MERN项目且运行正常，但本次部署后出现404错误。这是实习第二轮开放式作业，截止到明天，之前仅使用过Netlify，要求必须部署在Vercel，急需解决问题。

提供的文件信息 #

• 文件结构
• package.json
• vercel.json
• 环境变量配置
• server.js代码
• 部署后错误截图

排查步骤 #

1. 检查vercel.json配置 #

Vercel后端路由全靠这个文件控制，重点核对：

• 是否正确设置functions字段，指定后端代码所在目录（比如根目录的server.js，或者api子目录）
• 是否配置routes重写规则，确保所有API请求转发到后端函数
  示例正确配置（若server.js在根目录）：

{
  "functions": {
    "server.js": {
      "runtime": "@vercel/node@2.15.1"
    }
  },
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/server.js"
    }
  ]
}

如果后端代码放在api目录（每个接口是单独文件），functions字段需改为"api/**/*.js"。

2. 核对package.json配置 #

• 确认存在start脚本，Vercel部署后端会优先调用它，比如："start": "node server.js"
• 确保express、mongoose等核心依赖都在dependencies字段下，而非devDependencies——Vercel部署时不会安装dev依赖

3. 环境变量验证 #

• 去Vercel控制台的「Settings -> Environment Variables」，确认所有需要的变量（数据库连接串、端口等）已正确添加，变量名和后端代码里的调用完全匹配
• 后端代码里要通过process.env.XXX读取变量，不能硬写敏感信息

4. Server.js代码检查 #

• 后端路由要和vercel.json的规则匹配，比如统一以/api开头
• 端口不能硬编码，要写成process.env.PORT || 5000，适配Vercel的动态端口分配
• 确认服务器启动逻辑正确，示例：

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

5. 查看部署日志 #

去Vercel控制台的「Deployments」页面，点开本次部署的日志，检查是否有依赖安装失败、数据库连接报错、服务器启动异常等信息——这些都会导致后端无法响应，触发404

6. 路径匹配校验 #

• 前端请求的API路径要和后端路由完全一致，比如前端请求/api/users，后端必须有对应的app.get('/api/users', ...)
• 若存在静态文件和API路由冲突，要确保vercel.json的routes规则优先处理API请求

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