Flutter Web项目：如何通过envied变量按环境自动生成JSON配置文件？

1. 用envied管理环境变量 #

先给项目装上envied和envied_generator依赖，然后在根目录创建对应环境的.env文件，比如.env.dev、.env.acc、.env.prod，每个文件里写好该环境的配置项：

# .env.dev示例
API_URL=https://dev-api.example.com
APP_TITLE=MyApp Dev

接着写一个env配置类，靠envied注解生成对应的变量：

import 'package:envied/envied.dart';

part 'env.g.dart';

@Envied()
abstract class Env {
  @EnviedField(varName: 'API_URL')
  static const apiUrl = _Env.apiUrl;
  @EnviedField(varName: 'APP_TITLE')
  static const appTitle = _Env.appTitle;
}

2. 写生成JSON的Dart脚本 #

在项目根目录建个generate_config.dart脚本，用来读取env变量并把配置生成到web目录（Flutter Web会自动加载web下的静态资源）：

import 'dart:io';
import 'dart:convert';
import 'lib/env.dart';

void main() {
  final configMap = {
    'apiUrl': Env.apiUrl,
    'appTitle': Env.appTitle,
    // 按需添加其他配置项
  };

  final configFile = File('web/config.json');
  configFile.writeAsStringSync(const JsonEncoder.withIndent('  ').convert(configMap));
  print('已生成${Env.appTitle}环境的config.json');
}

3. 把生成步骤集成到运行命令里 #

不用手动分步执行，直接把生成命令和flutter run绑定，不同环境对应不同命令：

# 开发环境
flutter pub run build_runner build --define=envied_generator:builder=path=.env.dev && dart generate_config.dart && flutter run -d chrome

# 测试环境
flutter pub run build_runner build --define=envied_generator:builder=path=.env.acc && dart generate_config.dart && flutter run -d chrome

# 生产环境
flutter pub run build_runner build --define=envied_generator:builder=path=.env.prod && dart generate_config.dart && flutter run -d chrome --release

4. 在Flutter Web里读取生成的JSON #

用rootBundle加载web目录下的config.json就行：

import 'dart:convert';
import 'package:flutter/services.dart';

Future<Map<String, dynamic>> loadAppConfig() async {
  final configContent = await rootBundle.loadString('config.json');
  return json.decode(configContent);
}

这样每次启动项目时，都会根据指定环境自动生成对应的JSON配置文件，完全符合你的需求。

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