Firebase托管React应用仅显示图标，未加载预期内容求助

可能原因及对应解决步骤 #

1. Firebase配置文件路径错误 #

React项目执行npm run build后，静态资源默认生成在build文件夹中，需确保firebase.json的hosting.public字段指向该文件夹：

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

修改后重新执行firebase deploy --only hosting部署。

2. 未生成或更新构建产物 #

部署前必须先执行npm run build生成最新的静态资源文件夹，若跳过此步骤，Firebase会上传旧的或空的资源，导致仅显示默认图标。

3. 缓存干扰 #

• 浏览器端：强制刷新页面（Windows/Linux用Ctrl+F5，Mac用Cmd+Shift+R），或使用无痕模式访问。
• Firebase端：登录Firebase控制台，进入Hosting页面的「设置」选项，手动清除缓存；或部署时添加--force参数：firebase deploy --only hosting --force。

4. React路由重写规则缺失 #

若使用React Router的BrowserRouter，必须在firebase.json中配置rewrites规则，将所有请求导向index.html（如上述配置示例），否则路由页面会出现资源加载异常，仅显示图标。

5. 本地构建产物异常 #

先在本地验证构建产物是否正常：安装serve工具（npm install -g serve），执行serve -s build，若本地无法正常显示内容，说明构建过程存在错误，检查npm run build的输出日志，修复编译或依赖问题后再重新构建部署。

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