使用Vercel部署React+NodeJS应用后显示index.js源码而非渲染页面

问题分析 #

部署后页面直接展示index.js原始代码，本质是部署平台没有正确识别React项目的编译产物，反而直接暴露了源码文件，没有走前端应用的渲染流程。

修复步骤 #

1. 本地先确认构建产物正常 #

先在本地执行构建命令，生成可部署的静态资源目录：

npm run build

执行完成后会得到build文件夹，里面是编译后的HTML、CSS和JS文件，这才是应该部署的内容。

2. 配置Vercel部署规则（针对你用Vercel的场景） #

• 确保vercel.json配置正确，指定构建命令、输出目录和路由 fallback：

{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

• 登录Vercel后台，找到你的项目，进入Build & Development Settings，确认Build Command是npm run build，Output Directory是build。如果你的前端代码在client子目录里，要把命令改成cd client && npm run build，输出目录改成client/build。

3. 分离前后端部署（针对你的仓库结构） #

你的仓库同时包含React前端和NodeJS后端，建议分开部署更稳妥：

• 前端单独部署到Vercel/Netlify这类静态托管平台，指定部署目录为client，构建命令用cd client && npm run build。
• NodeJS后端部署到Heroku、Vercel Serverless Functions或者其他后端托管平台，专门处理API请求。

4. 检查部署根目录 #

如果直接部署仓库根目录，平台可能会优先识别根目录的index.js作为后端入口，而忽略前端的静态资源。要么把前端设置为部署根目录，要么配置路由规则让前端路由优先匹配。

5. 查看构建日志排查问题 #

部署后去平台的构建日志里看是否有报错，比如依赖安装失败、构建命令执行错误等，这些都会导致无法生成正确的build目录，进而出现显示源码的问题。

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