Vue：Firebase：挂载钩子错误：“FirebaseError：没有创建Firebase App'[DEFAULT]'

Question

我正在构建 Vue SPA 并在发布之前检查了许多帖子。

我不确定我做错了什么。

下面是我的 App.Vue：

<template>
    <div id="app">
        <Navigation />
        <router-view class="container" :user="user" />
    </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
// import db from './db.js';
import Firebase from 'firebase';
export default {
    name: 'App',
    data: function() {
        return {
            user: null,
        };
    },
    mounted() {

        Firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.user = user.email;
            }
        });
    },
    components: {
        Navigation,
    },
};
</script>

<style lang="scss">
$primary: #37c6cf;
@import '../node_modules/bootstrap/scss/bootstrap';
</style>

注意：我已经评论了从 db.js 的导入，在第一次导入后可以找到。如果我启用它，Vue CLI 会抛出不同的错误。

在 db.js 中：

import firebase from 'firebase';
const firebaseConfig = {
    apiKey: 'yourkey',
    authDomain: 'domainnew.firebaseapp.com',
    databaseURL: 'yourdomain.com',
    projectId: 'yourproject',
    storageBucket: 'test',
    messagingSenderId: '454545',
    appId: '1:444d96:web:d78df',
    measurementId: 'G-69599595',
};

// Initialize firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
firebase.analytics();
export default firebaseApp.firestore();

在控制台中，我不断收到两个错误，并且我的 Vue 没有从 Firebase 检索我的电子邮件地址。

任何人都可以在这方面提供帮助。

Answer 1

以下应该可以解决问题：

db.js 文件

import firebase from 'firebase/app';
import "firebase/analytics";
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
    apiKey: 'yourkey',
    authDomain: 'domainnew.firebaseapp.com',
    databaseURL: 'yourdomain.com',
    projectId: 'yourproject',
    storageBucket: 'test',
    messagingSenderId: '454545',
    appId: '1:444d96:web:d78df',
    measurementId: 'G-69599595',
};

firebase.initializeApp(firebaseConfig);



const db = firebase.firestore();
const auth = firebase.auth();
const analytics = firebase.analytics();

export { db, auth, analytics };

App.js 文件

<template>
    <div id="app">
        <Navigation />
        <router-view class="container" :user="user" />
    </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
const fb = require('./db.js');

export default {
    name: 'App',
    data: function() {
        return {
            user: null,
        };
    },
    mounted() {

        fb.auth.onAuthStateChanged(user => {
            if (user) {
                this.user = user.email;
            }
        });
    },
    components: {
        Navigation,
    },
};
</script>

<style lang="scss">
$primary: #37c6cf;
@import '../node_modules/bootstrap/scss/bootstrap';
</style>