Flutter Web项目在Vercel部署时无法读取环境变量API_KEY

AI 小北

2026-7-28

Flutter Web部署到Vercel后String.fromEnvironment读取不到环境变量的解决办法

核心问题在于：String.fromEnvironment是编译时注入的变量，必须在执行flutter build web时通过--dart-define参数传入，Vercel后台直接设置的环境变量不会自动传递给Flutter的编译流程——这就是本地用VS Code的launch.json能正常读取，但部署到Vercel后返回空字符串的原因。

下面是两种可行的解决方式：

直接修改Vercel的构建命令
进入Vercel项目的「Settings」->「Build & Development Settings」，将Build Command替换为：
```
flutter build web --dart-define=API_KEY=$API_KEY
```
要是有多个环境变量需要注入，就追加--dart-define参数，比如：
```
flutter build web --dart-define=API_KEY=$API_KEY --dart-define=APP_URL=$APP_URL
```
通过vercel.json配置构建命令
在项目根目录新建vercel.json文件，写入以下内容：
```
{
  "buildCommand": "flutter build web --dart-define=API_KEY=$API_KEY"
}
```
多变量的话同样在buildCommand里继续添加--dart-define参数即可。