MERN项目部署Vercel后刷新页面出现Cannot GET路径错误

问题本质 #

• 刷新页面时，浏览器直接向Vercel服务器请求/classes或/students路径，但后端Express未配置对应路由，返回404。
• 加通配路由后出现500错误，核心原因是前端静态文件路径配置错误，或路由顺序不合理。

解决方案 #

1. 修正后端Express配置 #

确保后端正确托管前端静态文件，并将通配路由放在所有API路由之后：

const express = require('express');
const path = require('path'); // 必须引入path模块
const app = express();

// 1. 先配置所有API路由
app.get('/api/classes', (req, res) => {
  // 你的API业务逻辑
});
app.get('/api/students', (req, res) => {
  // 你的API业务逻辑
});

// 2. 托管前端打包后的静态文件（路径根据实际文件夹结构调整）
// 示例：后端代码在server目录，前端build文件夹在同级client目录下
app.use(express.static(path.join(__dirname, '../client/build')));

// 3. 通配路由：所有非API请求返回index.html，交给前端路由处理
app.get('*', (req, res) => {
  // 使用path.resolve确保绝对路径，避免相对路径错误
  res.sendFile(path.resolve(__dirname, '../client/build/index.html'));
});

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

2. 根据文件夹结构调整路径 #

根据你的项目实际结构修改静态文件和index.html的路径：

• 若前端build文件夹在项目根目录：path.join(__dirname, './build')
• 若后端与前端在同一根目录，前端build在client子目录：path.join(__dirname, './client/build')

3. 配置Vercel路由规则 #

在项目根目录创建vercel.json，确保Vercel正确转发请求：

{
  "routes": [
    // 优先处理API请求
    { "src": "/api/(.*)", "dest": "/server/index.js" },
    // 其余所有请求返回前端index.html
    { "src": "/(.*)", "dest": "/client/build/index.html" }
  ],
  // 配置自动构建命令（确保Vercel部署时自动构建前端）
  "buildCommand": "npm install && cd client && npm install && npm run build"
}

4. 500错误排查要点 #

• 确认前端已执行npm run build生成build文件夹，且Vercel部署时包含该文件夹。
• 用console.log(path.resolve(__dirname, '../client/build/index.html'))打印路径，检查是否指向正确的index.html文件。
• 确保通配路由放在所有API路由之后，否则会拦截API请求导致异常。

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