如何在Firebase Hosting部署React App？部署后页面空白求助

核心问题定位 #

页面空白大概率是React构建产物路径配置错误或SPA路由规则未设置导致的，以下是逐一排查的解决步骤：

1. 确保使用React生产构建产物 #

React项目不能直接把源码文件夹丢进Firebase的public目录，必须先生成生产环境构建文件：

• 在React项目根目录执行：npm run build（用yarn则执行yarn build）
• 执行后会生成build目录，这个才是需要部署的内容，而非项目源码或手动复制的文件夹。

2. 修正Firebase配置文件 #

打开项目根目录的firebase.json，检查并修改hosting配置：

• 将public字段的值从"public"改为"build"
• 必须添加SPA重写规则，确保所有路由都指向index.html（React单页应用的核心要求）
  正确配置示例：

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

3. 重新部署并清理缓存 #

• 执行部署命令：firebase deploy --only hosting（指定只部署托管部分，避免不必要的操作）
• 访问页面时按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，清除浏览器缓存。

4. 验证构建产物与部署状态 #

• 检查本地build目录，确认存在index.html和static文件夹（包含css、js等资源）
• 登录Firebase控制台，进入对应项目的Hosting页面，查看部署记录是否成功，以及是否有资源加载失败的日志。

5. 检查资源路径是否正确 #

打开本地build/index.html，查看静态资源的引用路径，确保是相对路径（比如/static/css/main.xxx.css），如果是绝对路径或错误路径，会导致资源加载失败，页面空白。

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