Flutter Web部署.env加载失败：404错误原因及解决方法求助

原因分析 #

flutter_dotenv在Web平台的默认加载路径是assets/.env，而非项目根目录。你在CI中生成的.env存放在项目根目录，且未配置pubspec将其纳入Web资源包，导致运行时引擎找不到该文件；之前尝试配置pubspec报错，是因为创建.env的步骤可能晚于flutter构建步骤，导致构建时文件不存在。

方案一：正确配置资源并调整CI步骤 #

1. 恢复pubspec.yaml的assets配置
   把注释掉的.env配置项恢复，确保flutter构建时能识别该文件：

   assets:
     - .env
     - assets/images/
     - assets/app_intro/
     - assets/app_screen/
   

2. 调整GitHub Workflow步骤顺序
   确保创建.env的步骤在flutter pub get之后、flutter build web之前执行，示例完整流程：

   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - uses: subosito/flutter-action@v2
           with:
             flutter-version: '3.13.x'
         - run: flutter pub get
         # 先创建.env文件
         - name: Create .env
           shell: bash
           run: |
             touch .env
             echo SUPABASE_URL=${{ secrets.SUPABASE_URL }} >> .env
             echo SUPABASE_ANONKEY=${{ secrets.SUPABASE_ANONKEY }} >> .env
             cat .env
         # 再执行Web构建
         - run: flutter build web --release
         # 后续部署步骤...
   

3. 确认dotenv加载路径
   Web环境下资源会被打包到assets目录，保持dotenv加载代码不变即可（flutter_dotenv会自动适配Web路径）：

   await dotenv.load();
   

方案二：直接注入环境变量到代码（更安全） #

既然.env内容都是GitHub Secrets，完全可以跳过创建.env文件，直接在CI构建时把环境变量编译进代码，避免文件加载问题：

1. 创建环境配置文件
   在lib/目录下新建env_config.dart：

   class EnvConfig {
     static const String supabaseUrl = String.fromEnvironment('SUPABASE_URL');
     static const String supabaseAnonKey = String.fromEnvironment('SUPABASE_ANONKEY');
   }
   

2. 修改Supabase初始化逻辑
   替换原dotenv加载代码，直接使用编译注入的变量：

   import 'env_config.dart';
   
   // ...
   final supabaseUrl = EnvConfig.supabaseUrl;
   final supabaseAnonKey = EnvConfig.supabaseAnonKey;
   
   if (supabaseUrl.isEmpty || supabaseAnonKey.isEmpty) {
     throw Exception("Supabase URL or Anon Key is not provided");
   }
   
   await Supabase.initialize(
     url: supabaseUrl,
     anonKey: supabaseAnonKey,
   );
   

3. 调整CI构建命令
   构建时通过--dart-define参数直接传递Secrets：

   - run: flutter build web --release --dart-define=SUPABASE_URL=${{ secrets.SUPABASE_URL }} --dart-define=SUPABASE_ANONKEY=${{ secrets.SUPABASE_ANONKEY }}
   

这种方法无需创建.env文件，也不需要配置assets，变量会直接编译进代码，安全性更高。

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