Firebase部署React项目后显示空白页问题求助

• 修正静态资源路径配置
  本地运行构建产物正常，但部署后加载失败，大概率是base路径未配置正确：

  • Vite项目：在vite.config.js中添加base: './'（根域名部署场景），若为子路径部署则填写对应路径；
  • Create React App项目：在package.json中添加"homepage": "."。

• 强制清除Firebase缓存
  Firebase Hosting的旧缓存可能导致新部署的代码未生效，执行命令强制部署并刷新缓存：

  firebase deploy --only hosting
  

  也可登录Firebase控制台，进入Hosting的「缓存」设置页面手动清除缓存。

• 确认构建与部署流程
  部署前必须确保已执行生产构建命令：npm run build（CRA）或npm run build（Vite），且firebase.json的public字段准确指向构建生成的dist或build目录。同时检查rewrites规则是否未被其他配置（如Firebase Functions）覆盖。

• 针对性排查控制台报错
  根据开发者控制台的具体报错处理：

  • 404错误：对应调整静态资源base路径；
  • 语法/变量错误：检查生产环境环境变量配置，确保构建时注入了正确的变量；
  • CORS错误：移除或替换未允许跨域的外部资源。

• 重置Firebase Hosting配置
  若上述方法无效，可删除现有firebase.json，重新执行firebase init hosting，按向导选择正确的构建目录并启用SPA重写规则，完成后重新部署。

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