将React应用部署到Firebase后显示默认着陆页的问题

核心排查与修复步骤 #

1. 确认React构建产物路径 #

React项目执行npm run build后，编译产物默认生成在build目录，而非项目开发阶段的public目录。你之前指定的public大概率是开发静态资源目录，并非部署所需的构建产物目录。

2. 修正firebase.json配置 #

打开项目根目录的firebase.json，将hosting下的public字段改为React构建产物目录（默认是build），如果是单页应用，建议同时添加路由重写规则避免刷新404：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 重新执行构建与部署 #

• 清理旧构建产物（可选）：rm -rf build（Mac/Linux）或rmdir /s build（Windows）
• 构建React项目：npm run build
• 重新部署：firebase deploy

4. 排查遗留的默认页面文件 #

如果之前误将Firebase默认的index.html留在了指定的部署目录中，部署时会优先加载该文件。请确认构建产物目录（如build）下的index.html是React项目生成的内容，而非Firebase的默认着陆页代码。

5. 验证部署文件内容 #

通过Firebase CLI查看已部署的文件列表，确认内容正确：

firebase hosting:list

也可登录Firebase控制台，进入Hosting -> 文件面板，检查根目录下的index.html是否为React构建产物。

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