时间戳

首页 > 解决方案 > '没有创建 Firebase 应用程序'[DEFAULT]''即使调用了 initializeApp

javascript - '没有创建 Firebase 应用程序'[DEFAULT]''即使调用了 initializeApp

问题描述

我正在尝试将 Firebase (Firestore) 添加到我的 Nuxt 项目中，但是在从firebase.firestore()我的index.vue文件中初始化 const 时收到以下错误：

未捕获的 FirebaseError：Firebase：没有创建 Firebase App '[DEFAULT]' - 调用 Firebase App.initializeApp() (app/no-app)。

我已经在我的项目中安装了 Firebase 以及模块 ( @nuxtjs/firebase)。

我的 nuxt.config.js 文件如下所示：

export default {

...

plugins: ['~/plugins/firebase.js'],

components: true,

buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
],

modules: [],

...

}

我的 firebase.js 文件位于我的插件文件夹中，如下所示：

import firebase from 'firebase/app'

const config = {
    ...
}

let app = null
if (!firebase.apps.length) {
    app = firebase.initializeApp(config)
}

export default firebase

我已经将上述内容与其他在线示例进行了比较，并没有发现任何问题。但是，我对从 Nuxt 到 Firebase 的一切都是新手，所以我可能会遗漏一些明显的东西。任何建议表示赞赏。

标签： javascriptfirebasevue.jsnuxt.js

解决方案

当您在初始化 firebase 之前尝试访问 firestore 时，通常会发生这种情况。因此，默认情况下，我们可以检查 firebase 是否已初始化，firebase.apps.length但每次都初始化 firebase 并不是一个好习惯。

因此，如果您只使用 firestore，那么在您的插件中，您可以在初始化后直接导出 firestore，如下所示，

import firebase from 'firebase/app'

const config = {
    ...
}

let app = null
if (!firebase.apps.length) {
    app = firebase.initializeApp(config)
}

export default firebase.firestore()

但是由于您使用的是 nuxt，所以有一个特殊的 nuxt 包，称为firebase/nuxt

安装后，您可以在模块部分的 nuxt config 中定义您的配置，如下所示，

modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          databaseURL: '<databaseURL>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // Just as example. Can be any other service.
        }
      }
    ]
  ],

我认为这是在 nuxt.js 中使用 firebase 的更好方法

推荐阅读