如何在Flutter Web应用中使用Vercel环境变量（不使用--dart-define）

一、本地环境：修复flutter_dotenv失效问题 #

1. 配置依赖与资源路径
   在pubspec.yaml的dependencies下添加：

   flutter_dotenv: ^5.1.0 # 建议使用最新稳定版本
   

   同时在flutter模块的assets中声明.env文件路径：

   flutter:
     assets:
       - .env
   

   执行flutter pub get更新依赖。

2. 正确加载.env文件
   在main.dart入口处，先完成dotenv加载再启动App：

   import 'package:flutter_dotenv/flutter_dotenv.dart';
   
   void main() async {
     await dotenv.load(fileName: ".env");
     runApp(const MyApp());
   }
   

   之后可通过dotenv.env['API_KEY']格式获取环境变量。

3. 路径注意事项
   .env文件必须放在项目根目录（与pubspec.yaml同级），不可放在web目录下，否则Flutter无法识别为资源文件。

二、Vercel部署：无需--dart-define使用控制台环境变量 #

方法1：构建时生成.env文件（复用flutter_dotenv逻辑） #

1. 在Vercel控制台「环境变量」中添加目标变量（如API_KEY=your-secret-key），保持默认的「构建时」类型即可。
2. 修改Vercel构建命令：
   进入项目设置→构建与开发设置→构建命令，替换为：

   echo "API_KEY=$API_KEY" > .env && flutter build web --release
   

   多变量场景可追加写入：echo "API_KEY=$API_KEY\nANOTHER_VAR=$ANOTHER_VAR" > .env
3. 部署时，Vercel会先根据控制台变量生成根目录的.env文件，flutter build web打包时会将该文件纳入资源，flutter_dotenv即可正常读取。

方法2：直接注入全局window变量（无需flutter_dotenv） #

1. 在Vercel控制台添加环境变量（如API_KEY=your-secret-key）。
2. 修改Vercel构建命令：

   echo '<script>window.appEnv = { API_KEY: "'"$API_KEY"'" };</script>' >> web/index.html && flutter build web --release
   

3. 在Flutter代码中通过dart:js访问变量：

   import 'dart:js' as js;
   
   String get apiKey => js.context['appEnv']['API_KEY'];
   

   本地开发时，可手动在web/index.html的<head>中添加该script标签，填入本地.env的变量值即可同步调试。

注意事项 #

• 确保.gitignore中包含.env，避免敏感信息提交到Git仓库。
• Flutter Web为静态应用，所有客户端环境变量都会暴露在编译后的代码中，敏感密钥若仅用于服务端调用，请勿放在客户端环境变量中。

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