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

Question

我正在从文档中学习 vue.js（版本 4.3.1）inte.net 上的教程，现在我正在尝试将 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中导出要在应用程序的 rest 中使用的变量。 如 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;