Firebase托管部署后持续显示空白页，多次尝试仍无法解决

1. 验证本地dist目录可用性 #

• 部署前先在本地测试dist目录是否正常：全局安装serve工具后，在项目根目录执行serve dist，访问本地返回的服务地址，确认页面可正常加载
• 若本地打开dist目录就显示空白，说明是前端项目打包本身的问题，与Firebase无关，优先排查打包配置：
  • 若框架使用history路由模式，必须额外配置Firebase重写规则
  • 检查打包的资源公共路径（publicPath）配置是否正确，避免写错误的相对路径

2. 补充firebase.json缺失配置 #

当前配置缺少单页应用必要的路由重写规则，会导致路由匹配失败、资源加载异常，修改配置如下：

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

3. 确认打包产物正确性 #

• 执行打包命令前先清理历史dist目录，避免旧缓存文件影响
• 确认dist目录根目录下存在index.html文件，所有静态资源（js、css、图片等）路径匹配配置

4. 部署后排查报错 #

部署完成后打开浏览器开发者工具：

• 查看Network标签，确认所有资源没有404/403报错
• 查看Console标签，确认没有js执行报错，若有报错优先排查本地打包逻辑

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