如何基于Flutter Flavors配置Web端Firebase Hosting多环境

方案一：构建时替换 index.html 占位符 #

1. 准备环境变量文件 #

在项目根目录创建两个环境配置文件：

• .env.staging

  GOOGLE_SIGNIN_CLIENT_ID=你的预发布环境Client ID
  

• .env.prod

  GOOGLE_SIGNIN_CLIENT_ID=你的生产环境Client ID
  

2. 修改 index.html 为模板 #

将原有的 Google Sign-In meta 标签替换为占位符：

<meta name="google-signin-client_id" content="%GOOGLE_SIGNIN_CLIENT_ID%" />

3. 执行环境构建命令 #

无需额外脚本，直接通过终端命令完成变量替换、构建并恢复原文件：

预发布环境构建

source .env.staging && sed -i.bak "s/%GOOGLE_SIGNIN_CLIENT_ID%/$GOOGLE_SIGNIN_CLIENT_ID/" web/index.html && flutter build web --release --flavor staging --output build/web-staging && mv web/index.html.bak web/index.html

生产环境构建

source .env.prod && sed -i.bak "s/%GOOGLE_SIGNIN_CLIENT_ID%/$GOOGLE_SIGNIN_CLIENT_ID/" web/index.html && flutter build web --release --flavor prod --output build/web-prod && mv web/index.html.bak web/index.html

4. 配置 Firebase Hosting 多环境目标 #

• 为两个环境分别绑定 Hosting 站点：

  firebase target:apply hosting staging 你的预发布站点ID
  firebase target:apply hosting prod 你的生产站点ID
  

• 修改 firebase.json 指定不同环境的构建输出目录：

  {
    "hosting": [
      {
        "target": "staging",
        "public": "build/web-staging",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [{"source": "**", "destination": "/index.html"}]
      },
      {
        "target": "prod",
        "public": "build/web-prod",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [{"source": "**", "destination": "/index.html"}]
      }
    ]
  }
  

5. 部署到对应环境 #

# 部署预发布环境
firebase deploy --only hosting:staging

# 部署生产环境
firebase deploy --only hosting:prod

方案二：Dart 动态设置 Meta 标签（推荐） #

1. 修改 main.dart 注入 Meta 标签 #

在入口文件中通过环境变量获取 Client ID，动态生成并添加 Meta 标签：

import 'dart:html' as html;
import 'package:flutter/material.dart';

void main() {
  // 读取构建时传入的环境变量
  const googleSignInClientId = String.fromEnvironment('GOOGLE_SIGNIN_CLIENT_ID');
  
  // 动态创建并插入 Meta 标签
  final metaTag = html.MetaElement()
    ..name = 'google-signin-client_id'
    ..content = googleSignInClientId;
  html.document.head?.append(metaTag);

  runApp(const MyApp());
}

2. 延迟加载 Google Sign-In SDK #

修改 web/index.html，确保 SDK 在 Flutter 初始化完成后再加载，避免读取不到 Meta 标签：

<!-- 移除原有直接加载的 SDK 脚本 -->
<!-- <script src="https://accounts.google.com/gsi/client" async defer></script> -->

<!-- 添加延迟加载逻辑 -->
<script>
  window.addEventListener('flutter-first-frame', () => {
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  });
</script>

3. 构建时传入环境变量 #

直接通过 --dart-define 参数传递对应环境的 Client ID：

预发布环境构建

flutter build web --release --flavor staging --dart-define=GOOGLE_SIGNIN_CLIENT_ID=你的预发布Client ID --output build/web-staging

生产环境构建

flutter build web --release --flavor prod --dart-define=GOOGLE_SIGNIN_CLIENT_ID=你的生产Client ID --output build/web-prod

4. 配置 Firebase Hosting 多环境（同方案一步骤4） #

5. 部署到对应环境（同方案一步骤5） #

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