部署到Firebase的React应用显示空白页，firebase.json已指向dist文件夹

• 检查本地构建产物

  • 确认dist文件夹包含完整的index.html、js/css等静态资源，直接打开本地dist/index.html测试是否能正常渲染。如果本地打开也空白，说明是React项目构建过程有问题，先排查代码或构建配置（比如vite.config.js/webpack.config.js）。
  • 查看index.html中的资源引用路径：若使用绝对路径，确保和Firebase Hosting的域名匹配；若用相对路径，检查package.json的homepage字段是否配置正确（比如设为"."），避免资源加载404。

• 验证Firebase部署状态

  • 执行firebase deploy --only hosting --debug重新部署，查看控制台输出，确认所有文件上传成功，无权限或路径报错。
  • 登录Firebase控制台，进入Hosting的「文件浏览器」，核对dist下的所有文件是否已完整上传，重点确认index.html和对应的打包js文件存在。

• 排查浏览器端错误

  • 访问部署后的URL时，打开浏览器开发者工具（F12）：
    • 查看Console标签，有没有JS执行报错（比如未捕获异常、依赖缺失），这类错误会导致React无法完成渲染；
    • 查看Network标签，检查index.html及静态资源的HTTP状态码，若出现404，说明资源路径配置有误。

• 确认路由配置（若使用React Router）

  • 如果你用了BrowserRouter，当前firebase.json的rewrites规则（将所有请求指向index.html）是正确的，但要确保本地开发时路由组件能正常渲染，没有路由逻辑错误；
  • 若使用HashRouter，路由导致空白的概率较低，但仍需检查路由组件的渲染逻辑。

• 清除缓存强制刷新

  • 按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，绕过浏览器缓存；
  • 也可在Firebase控制台Hosting设置中调整缓存规则，确保新部署的资源能被正确加载。

内容的提问来源于stack exchange，提问作者nathan.io