Question

编辑＃2

所以我现在有以下https://gist.github.com/benbagley/ef13bc70c62f2cc367561e3927a368fd

我得到的错误是

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

我只是在firebase.js文件中初始化firebase。

修改

这是关于发生了什么的GIF：

https://i.gyazo.com/0446e6b492aae300870a32f8bb2b2aa8.mp4

您好我使用Nuxt构建测试应用但是我收到以下错误

[Vue warn]: Error in created hook: "ReferenceError: firebase is not defined"

在Nuxt中，我有一个app.html文件，其中firebase链接在应用程序的其余部分，如此

index.vue

<template>
  <section class="flex h-screen w-screen uppercase shadow leading-loose">
    <section id="large-header" class="relative w-full overflow-hidden bg-cover bg-center gradient-background">
      <canvas id="demo-canvas"></canvas>

      <section class="flex flex-wrap w-full max-w-xs absolute m-0 bg-white shadow content">
        <section v-if="authUser" class="bg-white p-8">
          <h2 class="text-3xl text-black">Signed in as {{ authUser.email }}</h2>
          <button @click='signOut' class="twitch flex justify-center items-center p-8 uppercase text-white font-semibold tracking-wide w-full">
            Sign Out
          </button>
        </section>

        <section class="pt-4 pl-4 pb-0 pr-4" v-else>
          <tabs class="flex flex-wrap border-b w-full pt-2">
            <tab name="Sign In">
              <SignIn style="outline:none" />
            </tab>
            <tab name="Sign Up">
              <SignUp style="outline:none" />
            </tab>
          </tabs>
        </section>

        <button class="twitch flex justify-center items-center p-8 uppercase text-white font-semibold tracking-wide w-full">
          <i class="fab fa-twitch pr-2 text-xl"></i> Twitch
        </button>
      </section>
    </section>
  </section>
</template>

<script>
import SignIn from '@/components/Forms/SignIn'
import SignUp from '@/components/Forms/SignUp'
import {Tabs, Tab} from 'vue-tabs-component';

export default {
  components: {
    SignIn,
    SignUp,
    Tabs,
    Tab
  },
  data: function () {
    return {
      authUser: null
    }
  },
  methods: {
    signOut () {
      firebase.auth().signOut()
    }
  },
  created () {
    firebase.auth().onAuthStateChanged(user => { this.authUser = user })
  }
}
</script>

造成问题的一行是

firebase.auth().onAuthStateChanged(user => { this.authUser = user })

注册工作，所以登录然后当我添加上面的行时整个应用程序崩溃产生以下错误

[Vue warn]: Error in created hook: "ReferenceError: firebase is not defined"

感谢任何帮助！

Answer 1

通常，您可以通过

安装Firebase SDK

npm install --save firebase

（或yarn如果那是你的事情）

然后在需要的地方导入它，就像任何其他模块一样。

我建议您为firebase应用创建一个可以在其他位置导入的模块，例如src/firebase.js

import firebase from 'firebase' // import the sdk

// initialise your app
export default firebase.initializeApp({
  apiKey: "REDACTED",
  authDomain: "dashboard-nuxt-test.firebaseapp.com",
  databaseURL: "https://dashboard-nuxt-test.firebaseio.com",
  projectId: "dashboard-nuxt-test",
  storageBucket: "dashboard-nuxt-test.appspot.com",
  messagingSenderId: "1234567890"
})

然后在你的组件中

import firebase from '@/firebase'

// and later
firebaseApp.auth().onAuthStateChanged(user => { this.authUser = user })

ReferenceError：使用onAuthStateChanged时未定义firebase错误

1 个答案: