AuthProvider在使用firebase auth时不是构造函数，VueJS Webpack答案

【问题标题】：AuthProvider is not a constructor when using firebase auth, VueJS WebpackAuthProvider在使用firebase auth时不是构造函数，VueJS Webpack
【发布时间】：2017-12-13 14:18:30
【问题描述】：

我目前正在使用 Vue JS Webpack 模板来构建我的应用程序。每次我尝试使用身份验证提供程序之一登录时，都会收到以下错误：

Login.vue?a071:44 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__firebaseApp.a.auth.GoogleAuthProvider 不是构造函数

这是我的代码的相关部分：
我的 Firebase 配置文件

import firebase from 'firebase'
let config = {
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'
}
export default firebase.initializeApp(config)

和我的Login.Vue登录方法

<template>
	<div class="login">
		<div v-if="loading" class="modal-loading-white">
			<img class="loader-img" src="/img/loader-gray.svg">
		</div>
		<div>Login</div>
		<div v-show="this.errorMsg">{{ errorMsg }}</div>
		<div><label>Email </label>: <input type="email" v-model.trim="emailForm"/></div><br>
		<div><label>Password </label>: <input type="password" v-model.trim="passwordForm"/></div><br>
		<button v-on:click="logInUserWithProvider('email')">Login</button><br>
		<div><router-link to="forgot">Forget Your Password?</router-link></div>
		<button v-on:click="logInUserWithProvider('google')">Google</button>
		<button v-on:click="logInUserWithProvider('facebook')">Facebook</button>
	</div>
</template>

<script>
  import firebase from '../firebaseApp'
  export default {
	name: 'loginForm',
	data: function () {
		return {
			emailForm:'',
			passwordForm: '',
			errorMsg: '',
			loading: false
		}
	},
	methods: {
		logInUserWithEmail: function() {
			if (this.emailForm && this.passwordForm) {
				this.loading = true;
				firebase.auth().signInWithEmailAndPassword(this.emailForm, this.passwordForm).catch(function (error) {
					this.errorMsg = error.message;
					this.loading = false;
				}.bind(this));
			} else {
				this.errorMsg = 'Email and password can\'t be empty';
			}
		},
		logInUserWithProvider: function(provider) {
			if (provider == 'google') {
				var authProvider = new firebase.auth.GoogleAuthProvider();
				this.loading = true;
				firebase.auth().signInWithRedirect(authProvider);
			} else if (provider == 'facebook') {
				var authProvider = new firebase.auth.FacebookAuthProvider();
				this.loading = true;
				firebase.auth().signInWithRedirect(authProvider);
			} else if (provider == 'email') {
				this.logInUserWithEmail();
			}

			firebase.auth().onAuthStateChanged((user) => {
				if (user) {					
					this.emailForm = '';
					this.passwordForm = '';
					this.$emit('login');
				}
			});
		}
	}	
  }
</script>

【问题讨论】：

能否提供完整的 Login.vue 文件？
@Follio 我已经添加了 Login.vue 的完整代码
您的 firebase 配置文件是否名为 firebaseApp.js？
见stackoverflow.com/a/44353652/7814783。您可以将 firebase 设置为 Vue.prototype 并在组件中的任何位置使用 firebase。

标签： javascript firebase webpack vue.js firebase-authentication

【解决方案1】：

您尝试导入的是配置数据容器。将您的 Firebase 配置文件更改为

import firebase from 'firebase'
let config = {
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'
}
firebase.initializeApp(config)
export default firebase

【讨论】：