(Webpack을 빌드하지 못했습니다?) 다양한 레벨의 Vue 구성 요소에있는 Firebase DB

Question

단일 파일 Vue 구성 요소를 사용하여 vue-fire 앱을 설정하려고합니다.
공식 사이트에서 제공되는 표준 (전체) Vue-cli Webpack 템플릿을 사용하고 있습니다.

let config = { 
    ... 
}; 
let app = Firebase.initializeApp(config); 
let db = app.database(); 
let usersRef = db.ref('users'); 

...

export default { 
    name: 'app', 
    data() { 
     return { 
      login: { 
       email: '', 
       password: '' 
      }, 
      newUser: { 
       email: '', 
       password: '' 
      }, 
      showRegister: false 
     } 
    }, 
    firebase: { 
       users: usersRef, 
    }, 
    ... 
} 

내가 뷰 라우터를 사용하고 있는데 내 경로는 다음과 같이 설정되어 있습니다 :

나는이 같은 App.vue에서 중포 기지로드가

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from '@/components/Home' 
import News from '@/components/News' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
     { 
      path: '/', 
      name: 'Home', 
      component: Home 
     }, 
     { 
      path: '/news', 
      name: 'News', 
      component: News 

     } 
    ] 
}) 

'뉴스'구성 요소에서 Firebase 앱에 액세스하고 싶습니다.

[DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). 

recommended solution가 App.vue에 초기화 된 응용 프로그램의 데이터베이스를 내보내고 하위 구성 요소를 가져 오는 것입니다 : 문제는 내가 News.vue 파일의 전체 Firbase 설정을 포함 할 경우, 나는 오류가 있다는 것입니다 . News.vue에

module.exports.FBApp = app.database(); 

그리고이 :

import FBApp from '../App.vue' 
let usersRef = FBApp.ref('users') 

을하지만 지금은 다음과 같은 오류가 무엇입니까 : 그래서 내 App.vue 스크립트의 하단이 추가

TypeError: __WEBPACK_IMPORTED_MODULE_0__App_vue___default.a.ref is not a function 

사람이 알고 있나요을 어떻게해야합니까? 확실하게 그것은 너무 어려울 수 없습니다.

Answer 1

app.vue와 함께 다음과 같은 db.js 파일을 만듭니다. 당신의 main.js에서

import firebase from 'firebase' 

var config = { 
    apiKey: 'xxxxx' 
    authDomain: 'xxxxx' 
    databaseURL: 'xxxxx' 
    projectId: 'xxxxx' 
    storageBucket: 'xxxxx' 
    messagingSenderId: 'xxxxx' 
} 
const firebaseApp = firebase.initializeApp(config) 

const db = firebaseApp.database() 

export default db 

: 모든 구성 요소에

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import VueFire from 'vuefire' 

// explicit installation required in module environments 
Vue.use(VueFire) 

Vue.config.productionTip = false 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
}) 

그리고 지금, 예를 들면 :

<template> 
    <span> 
    {{ news }} 
    </span> 
</template> 
<script> 
import db from '../db' 
export default { 
    data: function() { 
    return { 
     users: [], 
     sample: [] 
    } 
    }, 
    firebase: function() { 
    return { 
     news: db.ref('news') 
    } 
    } 
} 
</script>