Vue js 应用中的 Firebase 身份验证显示错误

Question

未捕获的引用错误：未定义火基

邮件.js

import Vue from "vue";
import firebase from "firebase";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
let firebaseConfig = {
apiKey: "qqq",
authDomain: "qqq",
databaseURL: "qqq",
projectId: "qqq",
storageBucket: "qqq",
messagingSenderId: "qqq",
appId: "qqq",
measurementId: "qqq"
};
firebase.initializeApp(firebaseConfig);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

上面的代码被添加到邮件中.js src文件夹内。

之后，我添加了一个RegisterVue

Register.vue：

<template>
<div class="sign-up">
<form @submit.prevent="register">
<input type="email" v-model="email" placeholder="Type your email" />
<input type="password" v-model="password" placeholder="Pick your password" />
<button> Sign Up </button>
</form>
</div>
</template>
<script>
import "firebase/auth";
export default {
data() {
return {
email: '',
password: ''
};
},
methods: {
register() {
alert(this.email)
} 
}
}
</script>

我注册了vue文件，我已经注册了一个表单并使用Firebase该功能可以正常工作，并显示上述警报消息，但是当我使用firebase.auth()时，它会显示错误，即

Firebase 未定义。

Answer 1

我不熟悉你正在使用的Firebase库和/或API。但是您的 Register.vue 中没有定义firebase，因此 ReferenceError 是预期的。

您在组件中导入"firebase/auth"，而不是 firebase。在我看来，您应该重复您在邮件中使用的火力导入.js：

import firebase from "firebase";
export default {
...
methods: {
register() {
firebase.auth(...);
...