Flutter是否支持真正的运行时环境变量？Docker部署如何实现？

直接通过 docker run -e MY_ENV_VAR=foobar 无法实现你的需求，核心原因如下：

• Flutter Web 没有真正的运行时环境变量支持，String.fromEnvironment 读取的是构建时通过 --dart-define 传入的参数，这些参数会被硬编码到编译后的 JS 文件中，构建完成后完全无法修改。
• Docker 容器的环境变量属于容器进程的系统环境变量，而 Flutter Web 代码运行在浏览器端，根本无法访问容器层面的环境变量。

可行解决方案 #

1. HTML 全局变量注入（推荐生产使用） #

通过在 index.html 中注入全局变量，让 Flutter 代码在运行时读取，是目前最成熟的方案：

步骤：

1. 修改 web/index.html，添加全局变量占位符：

   <script>
     window.appEnv = {
       MY_ENV_VAR: '__MY_ENV_VAR__'
     };
   </script>
   

2. 编写 Docker 启动脚本 entrypoint.sh：

   #!/bin/sh
   # 替换占位符，默认值设为 foobar
   sed -i "s/__MY_ENV_VAR__/${MY_ENV_VAR:-foobar}/g" /usr/share/nginx/html/index.html
   # 启动 Nginx 服务
   exec nginx -g "daemon off;"
   

3. 编写 Dockerfile：

   FROM nginx:alpine
   # 复制编译好的 Flutter Web 产物到 Nginx 目录
   COPY build/web /usr/share/nginx/html
   COPY entrypoint.sh /entrypoint.sh
   RUN chmod +x /entrypoint.sh
   ENTRYPOINT ["/entrypoint.sh"]
   

4. Flutter 代码中读取全局变量：

   import 'dart:js';
   
   final myEnvVar = context['appEnv']['MY_ENV_VAR'] ?? 'foobar';
   

5. 运行容器时传入环境变量：

   docker run -p 80:80 -e MY_ENV_VAR=foobar my-flutter-web-app
   

2. 启动时动态构建（仅测试场景） #

在 Docker 镜像中包含 Flutter SDK，启动容器时根据环境变量重新构建产物，缺点是镜像体积大、启动速度慢：

• Dockerfile 示例：

  FROM cirrusci/flutter:stable
  WORKDIR /app
  COPY . .
  # 启动时先构建再启动静态服务器
  CMD sh -c "flutter build web --dart-define MY_ENV_VAR=$MY_ENV_VAR && serve build/web -l 0.0.0.0:80"
  

• 运行命令同上，但每次启动都要重新编译，不适合生产环境。

3. 运行时加载配置文件 #

将环境变量写入独立的 config.json 文件，Flutter 启动时通过 HTTP 请求读取：

1. 在 build/web 目录下放置 config.json 模板：

   {
     "MY_ENV_VAR": "__MY_ENV_VAR__"
   }
   

2. 用 Docker 启动脚本替换占位符，Flutter 代码通过 http.get 请求并解析该文件。

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