Javascript firebase未定义Vue.js

我是vue.js的新手，我正在通过互联网上的文档和教程学习vue.js，现在我正在尝试使用Firebase和vue.js制作应用程序，但我运行它时，错误显示：

-未定义firebase

不过，我很确定我是进口的。这是我的代码：

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from "firebase"

var config = {
 apiKey: "###########",
 authDomain: "###########",
 databaseURL: "###########",
 projectId: "###########",
 storageBucket: "###########",
 messagingSenderId: "###########"
};
 firebase.initializeApp(config);
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
 })

<template>
<div class="login">
    <h3>Lets Register</h3>
    <input type="email" v-model="email">
    <input type="password" v-model="password">
    <button v-on:click="register">Submit</button>
    <p><router-link to="/Login"> Login? </router-link></p>
</div>

从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
从“firebase”导入*作为firebase
变量配置={
apiKey:“###########”，
authDomain:“##########”，
数据库URL:“##########”，
投射物：“##########”，
storageBucket:“##########”，
messagingSenderId:“###########”
};
firebase.initializeApp（配置）；
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
火基，
组件：{App}，
模板：“”
})

这是我的组件寄存器：

import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from "firebase"

var config = {
 apiKey: "###########",
 authDomain: "###########",
 databaseURL: "###########",
 projectId: "###########",
 storageBucket: "###########",
 messagingSenderId: "###########"
};
 firebase.initializeApp(config);
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
 })

<template>
<div class="login">
    <h3>Lets Register</h3>
    <input type="email" v-model="email">
    <input type="password" v-model="password">
    <button v-on:click="register">Submit</button>
    <p><router-link to="/Login"> Login? </router-link></p>
</div>

让我们登记
提交
登录

导出默认值{
名称：'注册'，
数据（）{
返回{
电子邮件：“”，
密码：“”
}
},
方法：{
寄存器：函数（）{
firebase.auth（）.createUserWithEmailAndPassword（this.email，this.password）。然后(
功能（用户）{
警报（'已创建帐户'）
},
功能（err）{
警报（“opps”+错误消息）
}
);
}
}
}

---

任何帮助都将不胜感激

您应该在每个要使用firebase的组件中导入firebase。看起来您现在正在导入另一个文件中的firebase，所以只需将导入添加到组件。

您的组件中确实没有定义，我也有这个问题。如何解决？模块

创建一个名为firebase.service.Js的Js文件，在此文件上定义使用firebase的每个函数，在此文件中配置firebase，然后将函数导出到其他文件中，在其中导入并使用它们，如下所示：

import firebase from 'firebase'

firebase.service.js

import * as firebase from 'firebase'

var config = { // put here your credentials
  apiKey: apiKey,
  authDomain: authDomain,
  databaseURL: databaseURL,
  projectId: projectId,
  storageBucket: storageBucket,
  messagingSenderId: messagingSenderId
}

firebase.initializeApp(config)

var auth = firebase.auth()
var db = firebase.database()

export function signOut (callback) {
  auth.signOut().then(value => {
    callback()
  }, err => { callback(err) })
}

<script>
    import { signOut } from './firebase.services'

    // use it here

</script>

组件

import * as firebase from 'firebase'

var config = { // put here your credentials
  apiKey: apiKey,
  authDomain: authDomain,
  databaseURL: databaseURL,
  projectId: projectId,
  storageBucket: storageBucket,
  messagingSenderId: messagingSenderId
}

firebase.initializeApp(config)

var auth = firebase.auth()
var db = firebase.database()

export function signOut (callback) {
  auth.signOut().then(value => {
    callback()
  }, err => { callback(err) })
}

<script>
    import { signOut } from './firebase.services'

    // use it here

</script>

从“/firebase.services”导入{signOut}
//在这里使用它

---

您无法导出firebase本身，因为它会抛出一个错误，说明firebase已初始化。

在main.js中，只需使用

Vue将firebase注册为全局。像这样使用（firebase）

，所有组件都可以访问它

import firebase from 'firebase'
Vue.use(firebase) 

var config = {
 apiKey: "####",
 authDomain: "####",
 databaseURL: "####",
 projectId: "####",
 storageBucket: "####",
 messagingSenderId: "####"
};
firebase.initializeApp(config);

new Vue({
 el: '#app',
 render: h => h(App),
 router : router,
 firebase: firebase,
})

在您的组件中，不要忘记这样导入：

import firebase from 'firebase'

---

只是添加一些更多的信息，以防有人发现它有用。首先，只加载您需要的firebase组件。加布里埃尔·卡内罗的回答实际上是以下内容的基础

在firebase.js中初始化和导出方法、模块等

/*this will import all the firebase which can be a bottleneck */
// import * as firebase from 'firebase'

/*better only importing what you need*/
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';

const config = {
    apiKey: "***************",
    authDomain: "***************",
    databaseURL: "***************",
    projectId: "***************",
    storageBucket: "***************",
    messagingSenderId: "***************",
    appId: "***************"
};

/*OptionalPrjName is optional that you can initialize your firebase with 
it in case you are using more than one project or config file  , 
it's optional as firebase can initialize without this name*/
firebase.initializeApp(config, "OptionalPrjName");
const auth = firebase.auth(firebase.app("OptionalPrjName"));
const firestore = firebase.firestore(firebase.app("OptionalPrjName"));
const functions = firebase.functions(firebase.app("OptionalPrjName"));

/*create modules ; say one for sign up , etc , another for functions, etc ... */
const app_firebase = {
    signout: () => console.log(`firebase is` , firebase),
    test: () => console.log(`testing`),
}

/*export them here so you can import them individually where you need in your components */
export {
    app_firebase,
}

/*another way of only exporting your functions, etc. I like the above better becuase it helps bundling similar 
functionalities together under a name space ; make sure you don't create confusion by assigning similar naming 
so I always add something like app_ to my names in the above exports*/
export function fire_auth(callback) {
    console.log(`firebase `, auth, firestore, functions);
}

您的组件，其中您只能导入您需要使用的内容（让我们调用组件signup.vue），并说我们已将其放置在目录的根目录中，因此我们可以在../firebase:

<template>
    <div class="signup">
        <h2>signup</h2>
        <button type="button" @click="signup">Sign Up</button>
        <router-link to="/login">Login</router-link>
    </div>
</template>
<script>

import { fire_auth, app_firebase } from '../firebase';

export default {
    name: 'signup',
    data() {
        return {}
    },
    methods: {
        signup: function() {
            fire_auth();
            app_firebase.test();
        }
    }
}
</script>
<style scoped>
/* scoped attr limits style to this component only */
</style>

报名
注册
登录
从“../firebase”导入{fire_auth，app_firebase}；
导出默认值{
姓名：'注册'，
数据（）{
返回{}
},
方法：{
注册：函数（）{
开火；
app_firebase.test（）；
}
}
}
/*作用域属性将样式仅限于此组件*/

但是当我在组件上导入它时，如果是saya vue not DefinitEdit，则无法工作，您无法导出/导入已配置的firebase，这将引发错误。对不起，先生，但我不使用vuex yetDone。如果您想在实践中看到这一想法，请查看以下回购协议：。我可以帮助您使用firebase+Vue，我在使用它时浪费了很多时间。