React应用部署Vercel仅显示index.html内容，缺失完整功能

安全阿岳

2026-6-30

React+TypeScript 部署Vercel后仅显示纯文本的排查与解决

核心问题定位

你的GitHub仓库中存在纯文本版的index.html（根目录或public目录下），且Vercel可能未正确配置为部署build目录的构建产物，导致直接渲染了仓库中的静态纯文本文件，而非React应用的构建结果。

具体排查与解决步骤

检查仓库的index.html文件
确认仓库里的public/index.html（create-react-app默认模板文件）是否被替换成了纯文本内容。本地开发环境的public/index.html应该包含<div id="root"></div>以及React应用所需的模板结构，将本地正常的public/index.html推送到GitHub，覆盖仓库中的错误版本。
同时检查仓库根目录是否存在额外的index.html文件，Vercel会优先加载根目录的静态文件，若存在则会忽略build目录的内容，需删除根目录多余的index.html。
修正Vercel构建配置
1. 进入Vercel项目控制台，打开「Settings」→「Build & Development Settings」
2. 确保「Build Command」设置为对应包管理器的构建命令：npm run build 或 yarn build
3. 确认「Output Directory」设置为build（create-react-app默认的构建输出目录），若留空或设置错误，Vercel会直接部署仓库根目录的静态文件。
验证构建日志
部署时查看Vercel的构建日志，确认是否执行了构建命令：
- 日志中应出现「Creating an optimized production build...」的提示
- 确认最终输出「Build completed successfully」，且生成了build目录
  若日志未执行构建命令，说明配置未生效，需重新检查Build Command和Output Directory的设置。
确认package.json脚本
检查项目根目录的package.json，确保scripts中包含正确的构建命令：
```
"scripts": {
  "build": "react-scripts build",
  // 其他脚本...
}
```
若缺失该命令，需手动添加后推送至仓库。