在 Vue.js + Firebase 中设置项目的更好方法是啥？ [复制]

Posted 2023-02-16

【中文标题】在 Vue.js + Firebase 中设置项目的更好方法是啥？ [复制]

【英文标题】：What is the better way to set a project in Vue.js + Firebase? [duplicate]在 Vue.js + Firebase 中设置项目的更好方法是什么？ [复制]

【发布时间】：2021-05-30 06:51:39

【问题描述】：

我正在用 Vue.js + Firebase 做我的第一个项目。所以我有这个错误 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

当我使用 Firestore 时，变成了一个组件。

在 ma​​in.js 我有

import firebase from 'firebase/app'

Vue.config.productionTip = false

 const firebaseConfig = 
   apiKey: "********",
   authDomain: "*******",
   projectId: "*******",
   storageBucket: "*********",
   messagingSenderId: "*********",
   appId: "*********",
   measurementId: "********"
 ;

firebase.initializeApp(firebaseConfig);

所以在 Dashboard.vue

import firebase from "firebase/app";
import "firebase/firestore";
const db = firebase.firestore();

在其他视图中，例如 Login.vue Register.vue

我用过

import firebase from "firebase/app";
import "firebase/auth";

在这些视图中有效！

谢谢！！！

【参考方案1】：

假设您使用的是 Vue CLI 应用程序，我总是在 created() 中初始化 Firebase，如下所示：

<script>
import firebase from "firebase/app"
import "firebase/auth"
import fbConfig from "@/creds/fbConfig.json";

export default 
  name: "ComponentName",
  data: () => ( ),
  created() 
    if (!firebase.apps.length) 
      firebase.initializeApp(fbConfig)
    
    firebase.auth().onAuthStateChanged((user) => 
      if (user) 
        console.log("User is logged in!")
      
    )
  

</script>

尽管确保你在每个父级 Vue 组件上都编写了这段代码！ 如果是模态或页面部分等子组件，则无需初始化应用。