（Webpack 构建失败？）不同级别的 Vue 组件中的 Firebase DB

Posted 2023-02-23

【中文标题】（Webpack 构建失败？）不同级别的 Vue 组件中的 Firebase DB

【英文标题】：(Webpack failing to build?) Firebase DB in different levels of Vue components

【发布时间】：2017-08-27 09:43:37

【问题描述】：

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

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

 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,
     ,
     ...

我正在使用 Vue-router，我的路由设置如下：

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

recommended solution是在App.vue中导出初始化app的数据库，在子组件中导入。所以我将它添加到我的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

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

【问题讨论】：

你在用 vuefire 吗？

@Ffloriel 是的，我是

@DavidJ。解决了吗？

【参考方案1】：

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

现在在任何组件中，例如：

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

【讨论】：

我正在尝试让它工作，但是当我运行 npm run build 时出现一个奇怪的错误：ERROR in ./~/vue-fire/mixin.js Module not found: Error: Can't resolve './lib/fire' in '/home/david/projects/challenge/node_modules/vue-fire' @ ./~/vue-fire/mixin.js 7:11-32 @ ./~/vue-fire/index.js @ ./src/main.js Build complete.

你安装了firebase。你也可以发布你的 package.json

另外请发布您的 app.vue 和 main.js

你的代码很好，我只是愚蠢地用 vue-fire 替换了 vuefire。感谢您的帮助，得 50 分！