时间戳

首页 > 解决方案 > vue js应用程序中的firebase身份验证显示错误

vue.js - vue js应用程序中的firebase身份验证显示错误

问题描述

未捕获的 ReferenceError：未定义 firebase

邮件.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");

上面的代码是在 src 文件夹内的 mail.js 中添加的。

之后，我添加了一个RegisterVue

注册.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 未定义。

标签： vue.jsfirebase-authenticationvue-router

解决方案

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

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

import firebase from "firebase";

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

推荐阅读