Angular(5)项目部署Firebase后显示默认页面问题

DevOps 小满

2026-5-22

解决Angular 5部署Firebase后显示默认页面的问题

我之前也碰到过一模一样的问题，大概率是配置不完整或者构建路径匹配错了，咱们一步步来排查解决：

第一步：补全firebase.json的路由重写配置
Angular是单页应用，必须把所有路由请求重定向到index.html才能正常加载，你给出的配置里rewrites部分的"..."是未补全的占位符，这会导致Firebase无法正确识别你的应用入口。完整的hosting配置应该改成这样：
```
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```
第二步：确认Angular构建产物的实际路径
先运行ng build（如果是生产环境部署可以加--prod参数），然后去项目根目录的dist文件夹里检查：
- 如果dist下直接有index.html、main.js这些核心文件，那public: "dist"的配置是对的；
- 如果dist里还有一个和你项目同名的子文件夹（比如dist/my-angular-project），那得把public改成"dist/my-angular-project"，否则Firebase找不到正确的入口页面。
第三步：重新部署并强制刷新页面
修复配置和确认路径后，重新运行部署命令：
```
firebase deploy --only hosting
```
部署完成后，用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新浏览器，避免缓存旧的默认页面影响结果。