时间戳

首页 > 解决方案 > 无法在Vue js的组件中添加firebase

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

问题描述

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

火力基地未定义

但是，我将它放在一个名为 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"

标签： firebasevue.jsintegration

解决方案

您没有在firebase.js. 因此，当您import firebase from "../firebase"在 our中执行login.vue此操作时，代码会被导入，但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;

推荐阅读