Angular应用部署至Firebase出现404错误及空白页问题求助

开发者阿泽

2026-5-29

解决Angular部署到Firebase Hosting后出现404空白页的问题

根据你描述的情况——本地firebase serve正常，但部署后访问出现runtime.js等资源404、页面空白，结合你的环境（Angular 6.0.3、Firebase 5.0.4）和firebase.json配置，我来帮你排查和解决问题：

核心原因：Firebase Hosting未配置SPA路由重写

Angular是单页应用（SPA），所有路由逻辑都由前端处理，但Firebase Hosting默认会把每个URL当作静态文件路径去查找。当你刷新页面或直接访问子路由时，Firebase找不到对应的文件就会返回404；而firebase serve在本地运行时，自动帮你处理了路由重定向，所以本地测试一切正常。

解决方案：修改firebase.json添加rewrites规则

你需要在hosting配置中添加路由重写规则，将所有请求指向index.html，让Angular的路由系统来接管处理。修改后的firebase.json中hosting部分如下：

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

额外检查步骤

确认编译产物完整：执行ng build后，检查dist/hello目录下是否包含runtime.js、polyfills.js、main.js等所有编译后的文件。如果缺失，尝试执行ng build --prod（Angular 6默认build为开发环境，prod命令会生成优化后的完整产物）。
重新部署托管资源：执行firebase deploy --only hosting，只部署托管部分，观察控制台日志，确认所有dist/hello下的文件都被成功上传。
清除浏览器缓存：用无痕模式访问你的Firebase托管URL，避免浏览器缓存旧的错误资源。
检查base href配置：打开dist/hello/index.html，确认<base href="/">是否正确（如果你的应用部署在根路径下，这个配置没问题；如果是子路径，需要调整为对应路径）。