（网页包无法构建？）不同级别的Vue组件中的Firebase DB

我正在尝试使用单文件vue组件设置vue fire应用程序。
我使用的是官方网站上提供的标准（完整）Vue cli网页包模板

我在App.vue中加载了firebase，如下所示：

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

我使用的是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应用程序。问题是，如果在News.vue文件中包含整个Firbase设置，则会出现以下错误：

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

方法是在app.vue中导出初始化的应用程序数据库，并将其导入子组件中。因此，我将此添加到我的

App.vue

脚本的底部：

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

然后将此消息发送到

News.vue

：

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

但现在我得到了以下错误：

TypeError: __WEBPACK_IMPORTED_MODULE_0__App_vue___default.a.ref is not a function

---

有人知道怎么做吗？当然不会太难。

在app.vue旁边创建一个db.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

在main.js中：

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 }
})

从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
从“VueFire”导入VueFire
//模块环境中需要显式安装
Vue.use（VueFire）
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{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>

{{新闻}
从“../db”导入数据库
导出默认值{
数据：函数（）{
返回{
用户：[]，
样本：[]
}
},
firebase:函数（）{
返回{
新闻：db.ref（“新闻”）
}
}
}

在app.vue旁边创建一个db.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

在main.js中：

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 }
})

从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
从“VueFire”导入VueFire
//模块环境中需要显式安装
Vue.use（VueFire）
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{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>

{{新闻}
从“../db”导入数据库
导出默认值{
数据：函数（）{
返回{
用户：[]，
样本：[]
}
},
firebase:函数（）{
返回{
新闻：db.ref（“新闻”）
}
}
}

您使用的是vuefire吗？@Ffloriel Yes Iam@DavidJ. 这个问题解决了吗？你在使用vuefire吗？@Ffloriel是的我am@DavidJ. 这个问题解决了吗？我正在努力解决这个问题，但是当我运行npm运行build时，我遇到了一个奇怪的错误：

error in./~/vue fire/mixin.js Module not found:error:Can't resolve./lib/fire'/home/david/projects/challenge/node\u modules/vue fire'./~/vue fire/mixin.js 7:11-32./~/vue fire/index.js./src/main.js构建完成是否已安装firebase。也可以发布你的包。jsonAlso请发布你的app.vue和main.js你的代码很好，我只是愚蠢地用vue fire替换了vuefire。谢谢你的帮助，得了50分！我试图让它工作，但当我运行npm运行build时，我遇到了一个奇怪的错误：
中的错误。/~/vue fire/mixin.js模块未找到：错误：无法解决。'/home/david/projects/challenge/node_modules/vue fire'./~/vue fire/mixin.js 7:11-32@/~/vue fire/index.js@/src/main.js构建完成是否已安装firebase。也可以发布你的包。jsonAlso请发布你的app.vue和main.js你的代码很好，我只是愚蠢地用vue fire替换了vuefire。谢谢你的帮助，得了50分！