如何在 Flutter web 中使用 .env？

Question

短篇故事：

我正在尝试.env在我的 Flutter Web 项目中使用文件。

我flutter_dotenv之前在 Flutter 移动应用程序中使用过，但它在 Flutter web 中不起作用。

我们如何在 Flutter web 中使用 .env 文件？

很长的故事：

现在，我使用 dart 文件来保存当前的常量值，例如后端 url。

后端在这样的域中=> https://domain_for_webapp.com/api/

class Environment {

  // API URL
  static const String API_URL ='https://domain_for_webapp.com/api/';
...

但这里的问题是我还有一台服务器来部署同一个站点https://another_domain_for_webapp.com/api/ 所以我试图通过使用相对 url 来解决这个问题

class Environment {

  // API URL
  static const String API_URL ='/api/';
...

但是 Flutter web 无法为每个服务器找到正确的完整 API url。

为了解决这个问题，我一直在尝试.env像在普通的网络应用程序中一样使用。

但是我不能.env在 Flutter web 中使用。

这个问题有什么合适的解决方案吗？

Answer 1

不幸的是，正如您所注意到的，.env 似乎不适用于网络。希望它最终会被集成，但现在当我遇到同样的问题时，我发现配置网络的推荐方法涉及使用环境变量和参数dart-define：

String urlBase = const String.fromEnvironment("url_base");

这样您就可以使用不同的变量设置运行和构建环境。

不幸的是，这并不像 .env 文件那样“一劳永逸”，所以我喜欢在上面放置一个这样的保护，以便当您尝试运行时立即意识到它：

if (urlBase == null) {
  throw Exception("You must define url_base. This can be done "
                  "with the --dart-define arg to run or build");
}

如果您使用 IDE，则需要传入参数。对于 Visual Studio Code，您可以使用launch.json如下文件来执行此操作：

"configurations": [
    {
        "name": "Flutter",
        "request": "launch",
        "type": "dart",
        "args": [
            "--dart-define",
            "url_base=https://myurl.com/base"
        ]
    }
]

对于 IntelliJ/Android Studio，您可以在运行配置中执行此操作：

无论您使用什么构建工具，都非常简单，只需向命令添加附加参数即可flutter build web，即使用 docker：

RUN /usr/local/flutter/bin/flutter build web --dart-define url_base=$url_base

Answer 2

就像这里提到的，您可以将 .env 文件重命名为不以点开头的名称。我已将 .env 文件更改为“dotenv”。