无法在Vue js的组件中添加firebase

Question

我正在从互联网上的文档教程中学习 vue.js（版本 4.3.1），现在我正在尝试将 Vue js 与 Firebase 集成（“firebase”：“^7.14.0”，），但是当我运行它时，一个错误提示：

firebase 未定义

但是，我将它放在一个名为 firebase.js 的文件中，但是当我将导入添加到组件时，它会出现此错误。

//firebase.js
// Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "********",
    authDomain: "**********",
    databaseURL: "*********",
    projectId: "*********",
    storageBucket: "******",
    messagingSenderId: "******",
    appId: "*******",
    measurementId: "******"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

`

`

//login.vue
import firebase from "../firebase"

Answer 1

您没有在firebase.js 中导出任何内容。因此，当您在我们的login.vue 中执行import firebase from "../firebase" 时，代码被导入，但firebase 没有得到任何值。当您尝试在代码中访问 firebase 时，这会导致错误消息。

解决方案是从您的firebase.js 中导出您想在应用程序的其余部分中使用的变量。如 Renaud 提供的 Github 链接所示，您可以这样做：

//firebase.js
// Your web app's Firebase configuration
  var firebaseConfig = {
     ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  export {
    analytics: firebase.analytics(),
    auth: firebase.auth()
  }

或者，我个人的喜好：

//firebase.js
// Your web app's Firebase configuration
  var firebaseConfig = {
     ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  export default firebase;