如何将Flutter Web应用部署到已用Firebase托管的现有网站中

你完全不需要将Flutter Web应用托管到其他地址再通过iframe加载，直接在现有Firebase Hosting站点下部署即可，既可以实现指定路径加载Flutter应用的需求，也不会影响原有静态HTML页面的正常访问，具体操作步骤如下：

步骤1：构建带正确基础路径的Flutter Web产物 #

由于你的Flutter应用部署在站点子路径下，需要在构建时指定基础路径，避免静态资源加载404，执行以下构建命令：
flutter build web --base-href "/page-3/"
构建完成后所有产物会生成在项目根目录的build/web文件夹下。

步骤2：调整Firebase Hosting目录结构 #

找到你现有Firebase项目中托管配置指定的public根目录（即你存放原有page-1.html、page-2.html的目录），在该目录下新建page-3子文件夹，将上一步生成的build/web下的所有文件全部复制到public/page-3目录中。

步骤3：修改Firebase Hosting重写规则 #

编辑Firebase项目根目录下的firebase.json文件，在hosting配置项中增加对应路径的重写规则，示例配置如下：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 匹配/page-3及其子路径，指向Flutter应用入口
      {
        "source": "/page-3{,/**}",
        "destination": "/page-3/index.html"
      },
      // 匹配/profile及其子路径，指向Flutter应用入口，支持动态参数读取
      {
        "source": "/profile{,/**}",
        "destination": "/page-3/index.html"
      },
      // 原有兜底规则，保持不变即可
      {
        "source": "**",
        "destination": "/404.html"
      }
    ]
  }
}

该配置的优先级规则为：优先匹配现有静态文件，没有匹配到才走重写规则，所以原有page-1.html、page-2.html的访问完全不受影响。

步骤4：测试并部署上线 #

1. 本地验证配置是否正确，执行命令：
   firebase emulators:start --only hosting
   分别访问本地测试地址的/page-1.html、/page-3、/profile/任意用户名，确认原有页面和Flutter应用都正常加载、路径参数读取正常。
2. 验证无误后执行部署命令上线：
   firebase deploy --only hosting

额外注意事项 #

• Flutter Web侧可直接通过dart:html库的window.location.pathname读取路径参数，无需额外适配
• 后续迭代Flutter应用时，只需要重新执行构建命令，替换public/page-3目录下的产物后重新部署即可
• 若后续需要新增其他走Flutter应用的路径，仅需在firebase.json的rewrites数组中新增对应规则即可

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