Vercel部署MERN电商应用问题：首页显示index.js代码且路由失效

直接可用的vercel.json配置 #

在项目根目录创建或替换现有vercel.json，复制以下内容：

{
  "buildCommand": "cd api && npm install && npm run build",
  "outputDirectory": "api/dist",
  "functions": {
    "api/server.js": {
      "runtime": "@vercel/node@2.x"
    }
  },
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/server.js"
    },
    {
      "src": "/(.*)",
      "dest": "/dist/$1",
      "headers": {
        "Cache-Control": "public, max-age=3600"
      }
    },
    {
      "src": "/",
      "dest": "/dist/index.html"
    }
  ]
}

配置细节说明 #

• buildCommand：告诉Vercel构建时先进入api目录，安装依赖并执行构建脚本（确保api/package.json里有build脚本，能生成dist静态资源）
• outputDirectory：指定静态资源的输出位置，对应api下的dist文件夹
• functions：配置后端API的运行环境，指向你的Express入口文件（如果你的API入口不是api/server.js，自行修改路径）
• routes：核心路由规则
  • 先处理所有/api/开头的请求，转发到后端API处理
  • 其他请求优先从dist目录加载静态资源，解决React Router客户端路由刷新404的问题
  • 根路径直接返回dist/index.html，避免显示源码

配套调整 #

1. 检查api/package.json的build脚本，确保能把client的构建产物复制到api/dist。比如你的脚本可以写成：

   "build": "cd ../client && npm install && npm run build && cp -r dist ../api"
   

   （根据你的实际构建流程调整，保证client编译后的文件能放到api/dist下）
2. Vercel部署时选择项目根目录作为部署根，不要单独选api文件夹
3. 部署前在Vercel控制台清除缓存，避免旧配置干扰

验证要点 #

部署完成后：

• 访问根域名，应该显示React首页，不再出现index.js源码
• 测试API接口（比如/api/products），确认能正常返回数据
• 测试React路由跳转和刷新（比如/cart），确认页面正常显示，不会404

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