Nuxt + Firebase：名为“[DEFAULT]”的 Firebase 应用程序已存在（应用程序/重复应用程序）答案

【问题标题】：Nuxt + Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)Nuxt + Firebase：名为“[DEFAULT]”的 Firebase 应用程序已存在（应用程序/重复应用程序）
【发布时间】：2019-05-22 01:59:48
【问题描述】：

我正在为 firebase/firestore 编写自己的 nuxt 插件。我将其加载到配置中：

plugins: [
    '~/plugins/firestore.js',
    { src: '~/plugins/vuex-persist', ssr: false }
],

文件本身是这样的

import Vue from 'vue'
import * as firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  ...
}
firebase.initializeApp(config)

const settings = {
  timestampsInSnapshots: true
}
const store = firebase.firestore()
store.settings(settings)


class Firestore {
  ...
}
const firestore = new Firestore()

export default ({ app }, inject) => {
  inject('firestore', firestore)
}

当我运行 npm run dev 时，它会尝试在每次自动重新加载时创建一个 firebase 实例。我怎样才能让它只创建一次这个实例？

Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

【问题讨论】：

您可以在项目中配置两次 firebase。尝试找到它并删除它。
您应该在您的应用设置（初始化/引导代码）中调用 initializeApp()，以便它只运行一次。不知道为什么 Vue、React、Next 等都不止一次调用导入的代码，但那里可能也有更好的答案。请注意，创建一个名为Firestore 的类听起来很可疑；可能在这里重新发明轮子，可能会遇到冲突。
我可以重命名 Firestore，但里面的函数只是预设函数，比如 getAllUsers() 等。由于某种原因，每次热重载时都会调用引导程序。

标签： firebase vue.js google-cloud-firestore nuxt.js

【解决方案1】：

您可以检查firebase.apps 以查看其是否已加载。如果您只加载一次，那么您只需检查长度即可。如果您有多个，那么您可以检查每个应用程序名称。一旦它对我有帮助

if (!firebase.apps.length) {
    firebase.initializeApp({});
}

【讨论】：