Firebase项目部署异常：VS Code显示成功但站点无法访问求助

基础验证步骤 #

• 强制刷新浏览器（Ctrl+Shift+R 或 Cmd+Shift+R），或使用无痕模式访问站点，排除本地缓存导致的加载异常。
• 登录Firebase控制台，进入项目的Hosting页面，确认部署历史显示最新部署记录，且站点状态标识为正常运行。

配置与项目结构排查 #

• 核对firebase.json配置：
  • 确认hosting字段下的public路径正确指向项目静态资源目录（如"public": "dist"或"public": "build"，取决于项目构建输出位置）。
  • 检查rewrites规则是否有误，比如误将所有请求导向不存在的文件，导致页面404。示例错误配置：

    {
      "hosting": {
        "public": "wrong-path",
        "rewrites": [{"source": "**", "destination": "/missing.html"}]
      }
    }
    

• 检查项目结构：
  • 确认public指定目录下存在index.html（Firebase Hosting默认入口文件），且文件内容完整无语法错误。
  • 若为前端框架项目（Vue/React/Angular等），确保已执行构建命令（如npm run build），生成的静态资源已正确输出到public目录。

部署日志与错误排查 #

• 在VS Code终端运行firebase deploy --only hosting --debug，查看部署过程的详细输出，排查是否有隐藏的警告或错误（如文件上传失败、权限问题等）。
• 进入Firebase控制台Hosting页面的日志标签，查看访问请求对应的错误信息（如404、500状态码的具体原因）。

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