如何为Flutter Web+Firebase配置多环境？类Android/iOS风味管理

针对你的需求，完全可以实现类似Android Product Flavor或iOS Schemes的多环境管理，下面是具体落地步骤：

1. 分离多环境Firebase配置文件 #

在项目根目录创建firebase_configs文件夹，分别建立dev和prod子目录，将两个Firebase项目对应的Web初始化配置文件分别放入：

• firebase_configs/dev/firebase-config.js：开发环境的Firebase配置（从Firebase控制台下载的标准配置文件）
• firebase_configs/prod/firebase-config.js：生产环境的Firebase配置

2. 通过编译参数传递环境标识 #

用Flutter的--dart-define参数在编译时注入环境变量，明确当前运行/构建的环境：

• 启动开发环境：flutter run --dart-define=ENV=dev
• 构建生产环境Web包：flutter build web --dart-define=ENV=prod

如果用IDE（比如Android Studio），可以在Run/Debug配置的「Additional run args」里添加--dart-define=ENV=dev，每次运行自动匹配环境。

3. 动态加载对应环境的Firebase配置 #

Flutter Web依赖web/firebase-config.js完成Firebase初始化，因此需要在运行/构建前将对应环境的配置文件复制到web目录。可以写个简单脚本简化操作：

• Windows（bat脚本）：

@echo off
if "%1" == "dev" (
  copy firebase_configs\dev\firebase-config.js web\firebase-config.js
) else if "%1" == "prod" (
  copy firebase_configs\prod\firebase-config.js web\firebase-config.js
)

运行方式：switch_env.bat dev 或 switch_env.bat prod

• Mac/Linux（sh脚本）：

#!/bin/bash
if [ "$1" = "dev" ]; then
  cp firebase_configs/dev/firebase-config.js web/firebase-config.js
elif [ "$1" = "prod" ]; then
  cp firebase_configs/prod/firebase-config.js web/firebase-config.js
fi

运行方式：chmod +x switch_env.sh && ./switch_env.sh dev

4. 在Dart代码中识别环境并调整逻辑 #

通过String.fromEnvironment获取编译时注入的环境变量，根据环境分支处理业务逻辑：

// 全局环境标识，默认设为开发环境
final currentEnv = String.fromEnvironment('ENV', defaultValue: 'dev');

void initFirebase() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // 开发环境启用本地模拟器（如果使用Firebase Emulator Suite）
  if (currentEnv == 'dev') {
    FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
    FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
    FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001);
    // 开启调试日志
    FirebaseFirestore.instance.settings = const Settings(
      persistenceEnabled: false,
      logLevel: LogLevel.debug,
    );
  } else {
    // 生产环境配置，比如禁用调试日志、开启持久化
    FirebaseFirestore.instance.settings = const Settings(
      persistenceEnabled: true,
      logLevel: LogLevel.error,
    );
  }
}

// 业务逻辑中根据环境切换配置
String getFunctionEndpoint() {
  if (currentEnv == 'dev') {
    return 'http://localhost:5001/dev-project-id/us-central1';
  } else {
    return 'https://us-central1-prod-project-id.cloudfunctions.net';
  }
}

5. Firebase服务的多环境部署 #

Hosting部署 #

用Firebase CLI的target功能区分部署目标：

1. 绑定开发环境target：firebase target:apply hosting dev 你的开发项目ID
2. 绑定生产环境target：firebase target:apply hosting prod 你的生产项目ID
3. 部署到开发环境：firebase deploy --only hosting:dev
4. 部署到生产环境：firebase deploy --only hosting:prod

Functions部署 #

切换Firebase CLI的当前项目即可部署到对应环境：

• 切换到开发项目：firebase use 你的开发项目ID，然后执行firebase deploy --only functions
• 切换到生产项目：firebase use 你的生产项目ID，然后执行firebase deploy --only functions

Storage/Firestore #

由于已经通过配置文件关联了对应项目，运行或部署时会自动连接到当前环境的服务，无需额外配置。

内容的提问来源于stack exchange，提问作者Ceren Yaşa