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

Question

故事简述：

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

我之前在Flutter移动应用程序中使用了flutter_dotenv，但在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。

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

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

是否有适当的解决方案来解决这个问题？

- Diamond

Answer 1

很不幸，就像你发现的那样，.env 似乎无法在 Web 上使用。希望它最终能被集成，但目前为止，当我遇到相同的问题时，我发现推荐的配置 Web 的方法涉及使用环境变量和 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

- rmtmckenzie

---

谢谢。看起来这是目前最好的解决方案。 我希望我们很快能使用.env！ - Diamond

有没有办法在index.html文件中访问dart-define变量？ - tapizquent

@JoseTapizquent 我不这么认为 - 这会在构建时被编译成生成的 .js 文件中。 - rmtmckenzie

Answer 2

如 此处 所提到的，你可以将你的 .env 文件重命名为一些不以点号开头的名称。我已经将我的 .env 文件改为 "dotenv"。

- Jonas Goebel

Answer 3

这篇文章讲述了如何为Flutter在Web上创建环境，使用flutter run --dart-define=<变量>命令。

- aolsan