如何在同一Firebase项目部署两个不同Flutter Web应用及解决部署问题

要搞定这个问题，核心是给每个Flutter Web应用分配独立的构建输出目录，然后在Firebase的配置文件里为每个站点指定对应的目录和域名，避免部署时互相覆盖。下面是具体步骤：

1. 给两个Flutter应用设置不同的构建目录 #

默认flutter build web会把产物放到build/web，所以第二个应用得指定新目录：

• 第一个应用（对应前两个站点）：直接执行 flutter build web，产物留在默认的build/web
• 第二个应用（对应mydomain.com）：执行 flutter build web --output=build/web-second，把构建结果放到build/web-second文件夹里

2. 修改firebase.json配置，绑定站点和对应目录 #

打开项目根目录的firebase.json，改成下面的结构（注意替换掉注释里的内容）：

{
  "hosting": [
    {
      "target": "app1",
      "public": "build/web",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "site": "你的第一个站点ID" // 去Firebase控制台Hosting页面找对应站点的ID
    },
    {
      "target": "app1-second",
      "public": "build/web",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "site": "你的第二个站点ID" // 替换成实际的站点ID
    },
    {
      "target": "app2",
      "public": "build/web-second",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "site": "mydomain-com" // 第三个站点的ID，Firebase会把域名转成小写加短横线的格式，比如mydomain.com变成mydomain-com
    }
  ]
}

3. 关联target和站点ID（可选但更方便） #

在项目根目录的.firebaserc文件里，把target和站点ID绑定，这样部署时不用每次输长ID：

{
  "projects": {
    "default": "你的Firebase项目ID"
  },
  "targets": {
    "你的Firebase项目ID": {
      "hosting": {
        "app1": ["你的第一个站点ID"],
        "app1-second": ["你的第二个站点ID"],
        "app2": ["mydomain-com"]
      }
    }
  }
}

4. 按需部署指定站点 #

• 部署前两个共用同一个Flutter应用的站点：firebase deploy --only hosting:app1,hosting:app1-second
• 部署第三个独立的站点：firebase deploy --only hosting:app2

解决manifest.json 404错误的关键点 #

你遇到的这个错误，大概率是这几个原因：

• 第二个应用的构建目录指定错了，Firebase找不到manifest.json（它在Flutter构建产物的根目录）
• 先检查build/web-second里有没有manifest.json，确认flutter build web --output=build/web-second命令执行成功了
• 核对firebase.json里第三个站点的public字段是不是真的指向build/web-second，别写成默认的build/web了

额外提醒 #

• 每个站点的ID可以在Firebase控制台的Hosting页面，进入对应站点的设置里找到
• 部署时一定要用--only hosting:target-name指定要部署的站点，不然会把所有站点都覆盖成同一个内容
• 自定义域名得先在Firebase控制台完成验证和绑定，再部署对应的应用

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