如何将firebase配置为nuxt插件？答案

【问题标题】：How to configure firebase as nuxt plugin?如何将firebase配置为nuxt插件？
【发布时间】：2019-06-01 07:23:19
【问题描述】：

我正在尝试将 nuxt 中的 firebase 配置为插件。我必须在商店中调用nuxtInitServer，因为环境变量来自sharedEnv。

在登录页面调用登录方法时，出现错误： Uncaught TypeError: _plugins_firebase__WEBPACK_IMPORTED_MODULE_3__.default.auth is not a function

store/index.js

const getSharedEnv = () =>
  process.server
    ? {
        apiKey: process.env.FIREBASE_API_KEY,
        authDomain: process.env.FIREBASE_AUTH_DOMAIN,
        databaseURL: process.env.FIREBASE_DB_URL,
        projectId: process.env.FIREBASE_PROJECT_ID,
        storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_MESSAGE_SENDER_ID
      }
    : {}
...
export const actions = {
  nuxtServerInit({ commit, state, store, dispatch }, { req }) {
    if (process.server) {
      commit('setSharedEnv', getSharedEnv())
    }
  }
}

plugins/firebase.js

import Vue from 'vue'
import firebase from 'firebase/app'

Vue.use(firebase)

export default context => {
  // perform a store action manually to have access to `sharedEnv` object
  context.store.dispatch('nuxtServerInit', context)
  const env = { ...context.store.state.sharedEnv }
  if (!firebase.apps.length) {
    console.log('initialize firebase...')
    firebase.initializeApp(env)
  }
  return firebase
}

pages/login/index.vue

<script>
import firebase from '@/plugins/firebase'

export default {
  name: 'login',
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login: function() {
      let additionalClaims = {
        premiumAccount: true
      }
      console.log('login page')
      console.log(firebase)
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(
          response => {
    ...

【问题讨论】：

标签： firebase vue.js nuxt.js

【解决方案1】：

如果您需要身份验证功能，还需要导入 firebase/auth 库

即

import firebase from 'firebase/app';
import 'firebase/auth';

【讨论】：