使用Firebase Hosting部署React应用后仅显示标题页面空白问题

先确认本地build是否正常 #

• 重新执行npm run build，检查build文件夹里是否有index.html、static/js、static/css等完整文件
• 直接打开本地build目录下的index.html，要是本地也空白，问题出在build环节：
  • 打开浏览器控制台查看报错，大概率是资源路径或依赖问题
  • 彻底删除package.json里的homepage字段，再重新build一次

检查Firebase部署的文件是否完整 #

• 执行firebase deploy --only hosting时，留意控制台的上传日志，确认static文件夹和index.html都已上传
• 登录Firebase控制台，进入Hosting的「文件」页面，核对服务器上的文件与本地build目录的文件是否一致

查看浏览器控制台的具体报错 #

• 打开部署后的页面，按F12打开开发者工具，切换到「控制台」标签：
  • 如果出现static/js或css文件404，给firebase.json添加"trailingSlash": true配置，修改后内容如下：

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

  • 如果是路由相关报错，当前的rewrites规则是正确的，尝试强制清除浏览器缓存后再访问

强制刷新缓存 #

• 部署时添加--force参数：firebase deploy --only hosting --force，强制更新Firebase服务器缓存
• 浏览器按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac），跳过本地缓存刷新页面

检查环境变量配置 #

• 若项目使用了REACT_APP_开头的环境变量，确认build时这些变量已正确注入，本地build的包是包含正确环境变量的版本
• 可直接在build后的index.html中搜索环境变量值，验证是否已正确打包

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