如何在vite和vue中初始化firebase?
How to initialize firebase in vite and vue?
我是新来的。我正在尝试初始化 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'
)
})
}
}
感谢任何解决方案!
在您的 firebase.ts
中,您正在使用 compat
版本初始化 Firebase(即使在 V9 中也让您使用 name-spaced 语法)但您正在尝试使用模块化版本在你的 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)
我是新来的。我正在尝试初始化 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'
)
})
}
}
感谢任何解决方案!
在您的 firebase.ts
中,您正在使用 compat
版本初始化 Firebase(即使在 V9 中也让您使用 name-spaced 语法)但您正在尝试使用模块化版本在你的 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)