代码之家 › 专栏 › 技术社区 › TSR

如何在Javascript Web中支持多个Firebase环境,尤其是在Flutter中

flutter-web dart flutter firebase javascript

TSR · 技术社区 · 4 年前

为了支持单个环境,以下代码在我的flutter web index.html中运行良好

<html>
  ...
  <body>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

    <!-- Firebase Configuration -->
    <script>
      var firebaseConfig = {
        apiKey: "...",
        authDomain: "[YOUR_PROJECT].firebaseapp.com",
        databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
        projectId: "[YOUR_PROJECT]",
        storageBucket: "[YOUR_PROJECT].appspot.com",
        messagingSenderId: "...",
        appId: "1:...:web:...",
        measurementId: "G-...",
      };

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>

  </body>
</html>

但是,如何在Flutter Web中支持多个Firebase环境?

例如,除了上述内容之外,我还希望有两个名为 dev 和 preprod 对于Dev,请使用不同的配置:

         var firebaseConfigDev = {
            apiKey: "...",
            authDomain: "[YOUR_PROJECT_DEV].firebaseapp.com",
            databaseURL: "https://[YOUR_PROJECT_DEV].firebaseio.com",
            projectId: "[YOUR_PROJECT_DEV]",
            storageBucket: "[YOUR_PROJECT_DEV].appspot.com",
            messagingSenderId: "...",
            appId: "1:...:web:...",
            measurementId: "G-...",
          };

对于预印本,另一种配置

         var firebaseConfigPreprod = {
            apiKey: "...",
            authDomain: "[YOUR_PROJECT_PREPROD].firebaseapp.com",
            databaseURL: "https://[YOUR_PROJECT_PREPROD].firebaseio.com",
            projectId: "[YOUR_PROJECT_PREPROD]",
            storageBucket: "[YOUR_PROJECT_PREPROD].appspot.com",
            messagingSenderId: "...",
            appId: "1:...:web:...",
            measurementId: "G-...",
          };

我在互联网和StackOverflow上到处搜索,找不到如何实现这一点的例子。然而,我在Android上找到了它,它很容易 How to maintain two google-services.json, production and debug 以及使用构建风格。

但在flutter web中,什么是build flavores和google服务json的等价物?

0 回复 | 直到 4 年前

atketan 4 年前

到目前为止,与移动应用程序不同,在Flutterweb中似乎没有简单的方法来实现这一点。

尽管作为一种替代方案,您可以通过网络实现这一点 构建管道 。

将index.html保存为项目中的模板(例如index.html.template),并将所有firebase配置定义为 环境变量 ,并在构建过程中替换这些变量以生成实际的index.html
根据构建的目标环境(dev、preprod、prod等)在管道中填充这些环境变量,这反过来会生成相应的索引文件
通过这种方式,您可以使用不同的Firebase配置实现动态构建