Nuxt SPA Firebase 托管：从 __/firebase/init.js 文件中读取配置

Question

如您所知，所有 Firebase 托管都提供了一个 __/firebase/init.js，其中包含 apiKey、项目 ID 等。

我正在尝试以读取配置表单的方式托管我的 SPA，而不是在构建期间对其进行硬编码。

这是我的 nuxt.config.js：

[
      '@nuxtjs/firebase',
      {
        config: {
          production: {
            apiKey: '',
            appId: '',
            authDomain: '',
            messagingSenderId: '',
            projectId: '',
            storageBucket: '',
          },
        },

        onFirebaseHosting: true,

        // customEnv: true,
        services: {
          auth: {
            persistent: 'local',
            initialize: {
              onAuthStateChangedAction: 'onAuthStateChanged',
            },
            ssr: false, // default
          },
        },
      },

当我在 Firebase 托管中部署应用程序时，我收到以下错误：

如您所见，配置未获取。

源代码有这些提示：

https://github.com/nuxt-community/firebase-module/blob/217ac819e36a8a74159eb3c2625a98f14ed5cfd0/lib/module.js#L106

https://github.com/nuxt-community/firebase-module/blob/217ac819e36a8a74159eb3c2625a98f14ed5cfd0/lib/sw-templates/firebase-auth-sw.js#L7

const ignorePaths = <%= serialize(options.ignorePaths) %>

<% if (options.loadFromFirebaseHosting) { %>
// Only works on Firebase hosting!
importScripts('/__/firebase/<%= options.firebaseVersion %>/firebase-app.js')
importScripts('/__/firebase/<%= options.firebaseVersion %>/firebase-auth.js')
importScripts('/__/firebase/init.js')

我想知道这是否可以通过 SPA 实现，因为它都是预先构建的。我能以某种方式从这个文件动态生成配置吗？

Answer 1

/__/firebase/init.js 脚本很特别，因为 Firebase 托管会自动确定您为哪个项目调用它并返回该项目的配置设置。为了能够做到这一点，它需要在知道 Firebase 的环境中执行，例如 Firebase Hosting 本身或 Hosting 模拟器。

您可以做的是将必要的配置注入您的应用程序，而不是从/__/firebase/init.js 中提取。两种情况下的配置块如下所示：

const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

另请参阅 setting up in Node.js apps 的 Firebase 文档，这与您在这种情况下所做的最接近。