React项目部署到Firebase后显示默认托管配置完成页问题

部署后显示「Firebase Hosting Setup Complete」默认页，和你贴的React模板index.html无关，核心问题是Firebase Hosting的静态资源目录配置错误：初始化Firebase时默认配置的托管目录是项目下的public文件夹，而create-react-app执行npm run build后生成的可部署编译产物，是存放在根目录的build文件夹下的，部署时上传的是Firebase初始化生成的默认欢迎页文件，不是你React项目的编译结果。

按以下步骤调整即可：

• 打开项目根目录下的firebase.json配置文件，找到hosting字段下的public配置项
• 将原本默认的"public": "public"修改为"public": "build"
• 建议同步添加前端路由重写规则，避免React Router做的路由在刷新时出现404，完整可用的配置参考：

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

• 保存配置后，在项目根目录重新执行两条命令：
  1. npm run build 重新全量编译React项目，生成最新的部署产物
  2. firebase deploy 重新上传build目录下的文件完成部署
• 部署完成后，用硬刷新（Windows按Ctrl+F5、Mac按Cmd+Shift+R）清除浏览器本地缓存，再访问生成的托管地址，就能正常加载React项目，不会再显示默认欢迎页。

如果调整配置后仍有问题，优先检查两个点：

• 执行完npm run build后，确认项目根目录下确实生成了build文件夹，且文件夹内存在编译后的index.html、对应js/css静态资源
• 查看firebase deploy执行时的命令行日志，确认没有提示「build目录不存在」类的报错，上传文件的统计数量和build目录下的文件数匹配。

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