尝试将 firebase 配置导入我的 vue 文件答案

【问题标题】：Trying to import firebase config into my vue file尝试将 firebase 配置导入我的 vue 文件
【发布时间】：2019-05-05 20:07:02
【问题描述】：

编辑：添加错误^^ !https://i.imgur.com/72x6LQX.png

firebase.js?5b23:11 Uncaught TypeError: app.database is not a function
at eval (firebase.js?5b23:11)
at Object../src/components/firebase/firebase.js (app.js:3496)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/components/front-end/Getstarted.vue:3)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/front-end/Getstarted.vue (app.js:2791)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (Getstarted.vue?5f4d:1)
at Object../src/components/front-end/Getstarted.vue (app.js:3552)

所以我试图将 firebase 代码放在我使用它的 .vue 文件之外的另一个文件中。如果我把它放在 vue 文件中，它确实像预期的那样工作，所以那里没有问题。但是我似乎无法弄清楚如何正确地做到这一点。

<script>
import Firebase, { functions } from 'firebase'
import conf from '../firebase/firebase'

let config = {
    apiKey: ''
    authDomain: ''
    databaseURL: ''
    projectId: ''
    storageBucket: ''
    messagingSenderId: ''
}

let app = Firebase.initializeApp(config)
let db = app.database()

let booksRef = db.ref('books')
(dashboard.Vue)

*这是我的 vue 文件中的内容 *

我有 2 个 javascript 文件一个有：

import config from './firebaseConfig'

class Firebase {
  constructor () {
    firebase.initializeApp(config)
  }
}

let db = app.database()

let booksRef = db.ref('books')

export default Firebase()
(firebase.js)

还有一个：

let config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: ''
}

export default (config)
(firebaseConfig.js)

我的文件夹结构如下：

components
|firebase
||firebase.js
||firebaseConfig.js
|backend
||Dashboard.vue

当我加载网页时，它只是一个空白页。想知道如何正确构建它，如果有任何不清楚的地方请告诉我

【问题讨论】：

您是否看到任何控制台错误？
添加了错误@ittus

标签： javascript firebase vue.js

【解决方案1】：

在下面一行，你没有声明变量app，所以它是undefined

let db = app.database()

你可以把firebase.js改成

import firebase from 'firebase'
import config from './firebaseConfig'

const app = firebase.initializeApp(config)
let db = app.database()

export default db

从你的组件中

import db from './firebase.js'
let booksRef = db.ref('books')
...

【讨论】：