在Firebase单项目下为不同Angular应用部署域名与子域名

你遇到的核心问题是Firebase Hosting默认只会加载单个站点配置，即便绑定了新子域名，若未配置多站点规则，它仍会指向首个部署的站点内容。下面是一步步的解决方案：

1. 在Firebase控制台创建第二个站点 #

登录你的Firebase项目控制台，进入Hosting板块：

• 点击顶部的添加站点按钮，输入一个专属标识（比如admin-mydomain，这个名字要记牢，后续配置会用到）。
• 站点创建完成后，进入新站点的设置页，绑定子域名www.admin.mydomain.com，确认你之前配置的TXT记录已生效（DNS解析可能需要几分钟到几小时，可在控制台查看域名验证状态）。

2. 重构firebase.json配置 #

原来的配置是单个hosting条目，现在要改成数组形式，为两个站点分别配置：

{
  "hosting": [
    {
      "site": "你的主站点标识", // 填写第一个站点的名称（比如mydomain-main）
      "public": "dist/main-app", // 主Angular应用编译后的输出目录，按需调整
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "site": "admin-mydomain", // 填写刚才新建的管理面板站点标识
      "public": "dist/admin-app", // 管理面板应用的编译输出目录
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

重点提醒：site字段必须和控制台创建的站点名称完全匹配；public要指向各自应用的编译产物目录——你可以用ng build --prod --output-path dist/main-app编译主应用，ng build --prod --output-path dist/admin-app编译管理面板。

3. 分别部署两个站点 #

为避免混淆，建议单独部署每个站点：

• 部署主站点：firebase deploy --only hosting:你的主站点标识
• 部署管理面板：firebase deploy --only hosting:admin-mydomain

额外注意事项 #

• 确认两个域名都在Firebase控制台完成了验证，TXT记录已生效（未验证的域名无法正确指向对应站点）。
• 不要把两个应用的编译产物放到同一目录，否则会相互覆盖。
• 若部署后仍显示错误内容，尝试清除浏览器缓存或用隐私窗口访问，避免缓存干扰。

内容的提问来源于stack exchange，提问作者Guruprasad J Rao