Firebase部署React应用后仅显示托管设置完成欢迎页如何解决

第一步：生成React生产构建产物 #

• 在React项目根目录执行npm run build，无自定义配置的前提下，编译后的可部署产物会自动生成在项目根目录的build文件夹内。

第二步：修正firebase.json配置 #

这是导致问题出现的最常见原因，Firebase初始化时默认会将部署目录设为public，该目录下存放的就是官方欢迎页的静态文件，需要手动修改为React的构建产物目录：

• 打开项目根目录下的firebase.json文件，找到hosting配置段，将public字段值修改为"build"
• 新增单页应用路由适配规则，避免刷新页面出现404问题，完整配置参考如下：

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

第三步：重新部署并验证 #

• 保存配置后在项目根目录执行firebase deploy，等待部署完成
• 访问站点时如果仍显示欢迎页，按Ctrl+Shift+R强制刷新清除浏览器缓存，或使用隐身窗口访问验证。

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