如何在Firebase Hosting上托管独立Flutter Web应用与着陆页

需求说明 #

需要在同一域名下通过Firebase Hosting实现：

• 根路径mysite.com加载静态着陆页（对应index.html）
• /game路径加载Flutter Web应用（对应game/index.html）

核心问题 #

需要解决两个关键配置：

1. 项目目录结构如何组织，同时容纳静态着陆页和Flutter Web编译产物
2. firebase.json如何配置URL重写，确保路径正确映射

一、推荐项目目录结构 #

采用集中托管目录+隔离子目录的结构，所有需要托管的文件都放在public目录下，避免Firebase上传无关源码文件：

你的项目根目录/
├─ public/                # Firebase Hosting的根托管目录
│  ├─ index.html          # 静态着陆页入口
│  ├─ css/                # 着陆页样式文件
│  ├─ img/                # 着陆页图片资源
│  └─ game/               # Flutter Web编译产物目录
│     ├─ index.html       # Flutter Web应用入口
│     ├─ main.dart.js     # Flutter编译后的核心JS
│     └─ ...              # 其他Flutter Web资源（如icons、manifest等）
├─ firebase.json          # Firebase配置文件
├─ .firebaserc            # Firebase项目关联配置
└─ （其他Flutter项目文件：lib/、pubspec.yaml等）

操作步骤：

1. 在项目根目录创建public文件夹，把静态着陆页的所有文件（index.html、css、图片等）放入其中
2. 编译Flutter Web应用时，直接指定输出目录为public/game：

   flutter build web --output=public/game
   

   这样编译后的所有Flutter资源会自动进入托管目录的子文件夹，无需手动移动文件。

二、Firebase Hosting配置（firebase.json） #

修改配置文件，指定托管根目录为public，并配置正确的URL重写规则，确保路径映射准确：

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      // 可选：给Flutter资源添加无缓存头，避免更新后浏览器缓存旧版本
      {
        "source": "/game/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ],
    "rewrites": [
      // 匹配/game路径（不带斜杠结尾的情况）
      {
        "source": "/game",
        "destination": "/game/index.html"
      },
      // 匹配/game下的所有子路径
      {
        "source": "/game/**",
        "destination": "/game/index.html"
      },
      // 所有其他路径默认加载着陆页
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
      "**/lib/**" // 排除Flutter源码目录，避免不必要的上传
    ]
  }
}

配置说明：

• public: 指定Firebase Hosting读取的根目录为public，只上传该目录下的内容
• rewrites: 重写规则按优先级匹配，先处理/game相关路径，确保Flutter应用的单页路由正常工作；剩余路径全部指向着陆页
• ignore: 排除不需要上传的文件/目录，减少部署体积和时间
• 可选的Cache-Control头：解决Flutter Web更新后浏览器缓存旧资源的问题，确保用户加载最新版本

针对你当前配置的问题修正 #

你当前的配置中source: "."会导致Firebase上传整个项目目录（包括Flutter源码、配置文件等），既不安全也会增加部署体积。改为public: "public"后，只会托管需要的静态资源和Flutter编译产物。另外，缺少对/game（不带斜杠）路径的匹配规则，添加后可以确保访问mysite.com/game时正确加载Flutter应用。

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