React应用部署Firebase Hosting后页面空白问题求助

问题分析 #

部署后页面空白、main.[hash].js返回内容与index.html一致的核心原因是Firebase重写规则覆盖了静态资源请求：当前配置中"source": "**"会让所有请求（包括JS/CSS等静态资源）都被定向到index.html，导致浏览器无法加载正确的JS代码，页面无法完成渲染。

本地运行和firebase serve正常，是因为本地服务器不会强制将静态资源请求重定向到index.html，而Firebase Hosting生产环境会严格执行重写规则。

解决方案 #

调整firebase.json的重写规则，先排除静态资源路径，再处理单页应用的路由重写：

修改后的firebase.json #

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        // 排除静态资源路径，确保/static下的文件能正常返回
        "source": "!/static/**",
        "destination": "/index.html"
      }
    ]
  }
}

额外检查步骤 #

1. 清理Firebase缓存：若部署后问题仍存在，可在Firebase控制台的Hosting页面点击「清除缓存」，强制刷新生产环境资源缓存。
2. 确认build文件完整性：部署前检查build/static/js/和build/static/css/目录下是否存在对应哈希文件名的文件，且index.html中的引用路径与实际文件一致。
3. 移除不必要的homepage配置：Create React App默认支持根路径部署，无需额外设置package.json中的homepage属性，多余配置反而可能引发路径问题。

验证操作 #

修改配置后重新执行部署：

npm run build
firebase deploy

部署完成后，打开浏览器开发者工具的「网络」面板，确认main.[hash].js的响应内容为正确的JavaScript代码，而非index.html。

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