通过 vue-cli(webpack) 在 vuejs2 应用程序中使用 firebase答案

【问题标题】：Using firebase in vuejs2 app via vue-cli(webpack)通过 vue-cli(webpack) 在 vuejs2 应用程序中使用 firebase
【发布时间】：2017-08-01 18:39:00
【问题描述】：

我不熟悉使用 vue-cli webpack 模板 我想使用 firebase 作为 vueapp 的数据库我这样做是为了将 Firebase 导入我的应用程序

main.js

//imported rest all required packages just dint mention here
import * as firebase from 'firebase'

let config = {
apiKey: " - XXXXXXXXCXCC",
authDomain: "XXXXXXXXX",
databaseURL: "XXXXXCCCX",
storageBucket: "XXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXX"
};

firebase.initializeApp(config);

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

现在在我的 signup.vue 文件中我必须再次导入以下内容

import * as firebase from 'firebase'

为了在我的方法中使用以下内容

firebase.auth().createUserWithEmailAndPassword(uEmail, uPassword).catch(function(error) {
                // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;
                // ...
            });

我的问题是我必须导入

import * as firebase from 'firebase'

无处不在（即在所有 vue 组件脚本标签中使用与 firebase 相关的方法，例如

firebase.auth()
firebase.database()
firebase.storage()

或者我可以将它导入一个中心位置并使用firebase.method() in any vue component file when needed

【问题讨论】：

标签： firebase webpack vue.js vuejs2

【解决方案1】：

您可以将firebase 附加到Vue.prototype：

import * as firebase from 'firebase'

let config = {
  //
}

Vue.prototype.$firebase = firebase.initializeApp(config)

new Vue({
  //
})

然后，像这样使用它的组件：

this.$firebase.database()

【讨论】：

谢谢......它成功了......我使用了这个方法，但忘记通过在它前面加上“this”来访问 $firebase

【解决方案2】：

如果你只想导入一次，你可以简单地在你的main.js中做：

import * as firebase from 'firebase'

window.firebase = firebase

window 对象对于网页来说是全局的，通常以这种方式使用它。

【讨论】：