Flutter Web多环境配置问题及Firestore+dotenv示例请求

首先，那个Chrome的source map报错是浏览器自身的小问题，不会影响项目运行，不用在意。你项目卡在加载页，核心是Web端多环境配置没到位，导致Firebase初始化失败。下面是Flutter Web结合dotenv+Firebase Firestore的多环境配置完整示例：

在pubspec.yaml里添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_dotenv: ^5.1.0
  firebase_core: ^2.15.0
  cloud_firestore: ^4.8.0

执行flutter pub get完成安装。

在项目根目录创建三个环境配置文件，分别对应不同环境：

• .env.local（本地开发环境）

FIREBASE_API_KEY=你的本地Firebase项目API_KEY
FIREBASE_AUTH_DOMAIN=你的本地项目AUTH_DOMAIN
FIREBASE_PROJECT_ID=你的本地项目PROJECT_ID
FIREBASE_STORAGE_BUCKET=你的本地项目STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID=你的本地项目MESSAGING_SENDER_ID
FIREBASE_APP_ID=你的本地项目APP_ID

• .env.staging（预发布环境）：替换为预发布Firebase项目的对应参数
• .env.production（生产环境）：替换为生产Firebase项目的对应参数

注意：把这三个.env文件加入.gitignore，避免敏感信息提交到代码仓库。

在pubspec.yaml的flutter节点下添加资源声明：

flutter:
  assets:
    - .env.local
    - .env.staging
    - .env.production

在lib目录下创建env_config.dart：

import 'package:flutter_dotenv/flutter_dotenv.dart';

class EnvConfig {
  static late String apiKey;
  static late String authDomain;
  static late String projectId;
  static late String storageBucket;
  static late String messagingSenderId;
  static late String appId;

  static Future<void> load(String env) async {
    final envFileName = '.env.$env';
    await dotenv.load(fileName: envFileName);
    
    apiKey = dotenv.get('FIREBASE_API_KEY');
    authDomain = dotenv.get('FIREBASE_AUTH_DOMAIN');
    projectId = dotenv.get('FIREBASE_PROJECT_ID');
    storageBucket = dotenv.get('FIREBASE_STORAGE_BUCKET');
    messagingSenderId = dotenv.get('FIREBASE_MESSAGING_SENDER_ID');
    appId = dotenv.get('FIREBASE_APP_ID');
  }
}

修改main.dart，实现基于环境参数的Firebase初始化：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'env_config.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 获取命令行传入的环境参数，默认用local
  const env = String.fromEnvironment('env', defaultValue: 'local');
  
  // 加载对应环境的配置
  await EnvConfig.load(env);
  
  // 初始化Firebase
  await Firebase.initializeApp(
    options: FirebaseOptions(
      apiKey: EnvConfig.apiKey,
      authDomain: EnvConfig.authDomain,
      projectId: EnvConfig.projectId,
      storageBucket: EnvConfig.storageBucket,
      messagingSenderId: EnvConfig.messagingSenderId,
      appId: EnvConfig.appId,
    ),
  );
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Firebase多环境测试')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 测试Firestore连接是否正常
              final snapshot = await FirebaseFirestore.instance.collection('test').get();
              print('Firestore数据条数：${snapshot.docs.length}');
            },
            child: const Text('测试Firestore连接'),
          ),
        ),
      ),
    );
  }
}

• 本地环境运行：

flutter run -d chrome --dart-define env=local

• 预发布环境运行：

flutter run -d chrome --dart-define env=staging

• 生产环境打包：

flutter build web --dart-define env=production

这套逻辑可以和你已配置的Android/iOS Flavor统一，只需要在对应平台的启动命令中传递相同的env参数，就能保证多端环境一致。

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