javascript - 如何在vite和vue中初始化firebase？

Question

我是新来的。我正在尝试初始化 firebase 应用程序。但我收到如下错误

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()

我创建了一个名为 firebase.ts 的文件，但我不太确定在哪里可以包含它以全局初始化 firebase。

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useHead } from '@vueuse/head'

import { isDark } from '/@src/state/darkModeState'
import useNotyf from '/@src/composable/useNotyf'
import sleep from '/@src/utils/sleep'
import { getAuth, signInWithEmailAndPassword } from '@firebase/auth'

const isLoading = ref(false)
const router = useRouter()
const notif = useNotyf()

const username = ref('')
const password = ref('')

const handleLogin = async () => {
  if (!isLoading.value) {
    isLoading.value = true
    signInWithEmailAndPassword(getAuth(), username.value, password.value)
      .then((user) => {
        isLoading.value = false
        router.push({ name: 'sidebar-dashboards-course' })
      })
      .catch((err) => {
        isLoading.value = false
        notif.error(
          'There is no user record corresponding to this identifier. The user may be deleted'
        )
      })
  }
}

感谢任何解决方案!

Answer 1

在您的 firebase.ts 中，您正在使用 compat 版本初始化 Firebase(即使在 V9 中，您也可以使用 namespace 语法)但您正在尝试在 Vue 组件中使用模块化版本。相反，尝试使用模块化 SDK 初始化 Firebase。所以 firebase.ts 应该是这样的:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {...};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

export { auth, db, storage };

然后尝试在您的组件中导入这些实例，而不是再次使用 get[Service]() 函数。

import { auth } from "../path/to/firebase.ts" // update the path as per your dir structure

// usage: instead of getAuth() here
await signInWithEmailAndPassword(auth, username.value, password.value)