React App本地运行正常，部署至Firebase后页面空白无报错

基础配置与部署流程检查 #

• 确认firebase.json的托管配置正确，尤其是单页应用的路由重写规则和构建目录指向：

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

  重写规则是单页应用必需的，否则路由跳转或刷新会导致资源加载异常。
• 重新执行完整的构建+部署流程：先运行npm run build确保构建无报错、build文件夹内容完整，再执行firebase deploy覆盖旧部署产物。

资源加载路径排查 #

打开浏览器开发者工具（F12）的Network标签，刷新页面后检查：

• 是否存在404状态的资源？比如CSS、JS文件路径错误。可以在package.json中添加"homepage": "."，强制React使用相对路径生成资源引用，避免绝对路径适配问题。
• 确认index.html中所有静态资源的引用路径是否能正常访问，比如/static/js/main.xxx.js这类文件是否加载成功。

本地验证生产构建产物 #

先在本地模拟生产环境运行构建产物：

1. 全局安装serve工具：npm install -g serve
2. 运行serve -s build访问本地服务
   如果本地运行构建产物也出现空白，说明问题出在构建环节：

• 检查代码中是否有在组件初始化阶段（比如useEffect外部）直接访问window、document等浏览器环境对象的代码，生产构建的打包优化可能导致这类代码执行失败，进而阻塞组件渲染。
• 确认package.json中的build命令是否为标准配置："build": "react-scripts build"，自定义构建脚本需确保没有遗漏关键步骤。

Firebase缓存与部署状态检查 #

• 部署后等待3-5分钟，Firebase的CDN缓存可能有刷新延迟，尤其是首次部署或修改配置后。
• 登录Firebase控制台的托管页面，查看最新部署记录，确认构建产物已成功上传。
• 使用浏览器无痕模式访问页面，排除本地缓存干扰。

manifest.json二次校验 #

虽然你已修复该问题，仍建议确认：

• manifest.json是否位于build文件夹根目录，且index.html中的引用路径正确：<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
• 校验manifest.json的JSON格式是否合法，确保没有语法错误（如逗号遗漏、引号不匹配）。

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