MERN全栈项目部署Vercel后后端数据加载失败求助

核心原因 #

Vercel对Node.js后端的部署逻辑和本地开发不同，它默认不会自动识别根目录下的Express服务，需要按照其Serverless Functions规则配置，或者通过配置文件指定后端入口。

具体修复方案 #

1. 调整后端为Serverless Functions（推荐） #

Vercel会自动识别/api目录下的函数，按以下步骤操作：

• 在项目根目录新建api文件夹
• 将原后端入口文件（比如server.js）迁移到/api，重命名为customers.js（对应你的/api/customers路由）
• 修改文件为Serverless兼容格式：

const express = require('express');
const serverless = require('serverless-http');
const mongoose = require('mongoose');
const Customer = require('../models/Customer');

const app = express();
const router = express.Router();

// 用环境变量配置数据库连接
mongoose.connect(process.env.MONGODB_URI, { 
  useNewUrlParser: true, 
  useUnifiedTopology: true 
});

// 处理/customers请求
router.get('/', async (req, res) => {
  try {
    const customers = await Customer.find();
    res.json(customers);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

app.use('/api/customers', router);
module.exports.handler = serverless(app);

• 安装依赖：npm install serverless-http

2. 通过vercel.json配置路由映射 #

如果不想调整目录，在根目录创建vercel.json文件，指定后端入口：

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/server.js" }
  ],
  "functions": {
    "server.js": { "runtime": "@vercel/node@20" }
  }
}

确保你的server.js是标准Express服务，且已正确配置CORS和路由。

3. 检查环境变量与部署 #

• 登录Vercel控制台，进入项目的Settings > Environment Variables，添加MongoDB连接字符串等必要变量
• 触发重新部署，确保环境变量生效

4. 修正前端请求路径 #

前端请求不要写死完整域名，用相对路径：

// 正确写法
fetch('/api/customers')
  .then(res => res.json())
  .then(data => /* 处理数据 */)
  .catch(err => console.error(err));

额外提醒 #

• Vercel Serverless Functions最长执行时间为10秒，避免后端有耗时操作
• 确保Express中已启用CORS：

const cors = require('cors');
app.use(cors());

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