如何解决Firebase部署后仅显示官方欢迎页面的问题

• 部署路径配置错误：firebase.json里的public字段指向的不是项目构建后的产物目录，或者部署了Firebase初始化时默认生成的public文件夹下的预置欢迎页
• 未提前执行项目构建命令：前端项目需要先执行构建命令生成生产环境产物，直接部署源文件或空目录时会默认加载Firebase预置的欢迎页
• 构建产物目录下缺失index.html入口文件：Firebase Hosting默认优先加载托管根目录下的index.html，文件缺失时会 fallback 到欢迎页
• 浏览器缓存问题：旧的欢迎页被本地缓存，实际已经部署成功但本地未拉取到最新资源
• 多站点部署配置错误：如果项目配置了多个托管站点，deploy命令未指定对应站点，默认部署到了其他站点实例

1. 确认并执行项目构建命令 #

先在项目根目录执行对应框架的构建命令，例如Vue/React项目执行npm run build，Angular项目执行ng build --prod，执行完成后确认生成的dist目录（或自定义的构建输出目录）中存在index.html文件，且所有静态资源均正常生成。

2. 校验firebase.json配置 #

打开项目根目录的firebase.json文件，确认hosting配置段的public字段值和你的构建输出目录完全一致，例如构建产物在dist/my-app下，参考配置如下：

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

注意不要保留初始化默认的"public": "public"配置，该默认目录下存放的就是Firebase官方欢迎页文件

3. 清理旧文件重新部署 #

• 确认你没有将自有代码存放在默认生成的public目录前提下，删除该目录，同时删除项目根目录下的.firebaserc缓存文件
• 执行firebase deploy --only hosting命令单独部署托管服务，部署完成后核对命令行输出的部署日志，确认上传的文件数量和你构建产物的文件数量匹配，无报错信息。

4. 验证访问结果 #

部署完成后，按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）强制刷新浏览器清除缓存，或使用无痕模式访问站点URL，确认是否正常加载自有站点内容。

5. 多站点场景补充操作 #

如果你的项目配置了多个托管站点，部署时需要指定对应站点ID：firebase deploy --only hosting:你的站点ID，避免部署到错误的站点实例。

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