Question

我正在将本地化的firebaseui与nuxt.js（ssr）集成。但我遇到了“未定义Firebase”错误。我是ssr和nuxt.js的新手，我真的希望有人能解释为什么此设置不起作用。任何帮助表示赞赏！

firebaseui指令：https://github.com/firebase/firebaseui-web#localized-widget

nuxt.config.js（相关部分）

plugins: [{ src: "~/plugins/firebase.js" }],

plugins / firebase.js

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

if (!firebase.apps.length) {
  firebase.initializeApp(process.env.firebaseConfig);
}

export const authProviders = {
  Google: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  Email: firebase.auth.EmailAuthProvider.PROVIDER_ID
};
export const firestore = firebase.firestore();
export const fireAuth = firebase.auth();
export default firebase;

pages / Login.vue

<template>
  <no-ssr>
    <div class="login">
      <div id="firebaseui-auth-container"></div>
    </div>
  </no-ssr>
</template>

<script>
import firebase, { fireAuth, authProviders } from "~/plugins/firebase";

export default {
  name: "Login",
  head() {
    return {
      title: "Login",
      script: [
        {
          src: 'https://www.gstatic.com/firebasejs/ui/4.1.0/firebase-ui-auth__en.js'
        }
      ],
      link: [
        {
          rel: "stylesheet",
          href: "https://cdn.firebase.com/libs/firebaseui/4.1.0/firebaseui.css"
        }
      ]
    };
  },
  mounted() {

    var checkFirebaseUi = setInterval(function() {

      if (window.firebaseui) {
        clearInterval(checkFirebaseUi);

        const firebaseui = window.firebaseui;


        console.log(firebase) // this line works

        // error comes from here
        // the code from firebaseui cdn return firebase not definded
        // but it's clearly accessible    
        const ui =
          firebaseui.auth.AuthUI.getInstance() ||
          new firebaseui.auth.AuthUI(fireAuth);

        ui.start("#firebaseui-auth-container", {
          credentialHelper: firebaseui.auth.CredentialHelper.NONE,
          signInOptions: [authProviders.Google, authProviders.Email],
          signInFlow: "popup",
          tosUrl: "/tos",
          privacyPolicyUrl: "/privacy-policy",
          callbacks: {
            signInSuccessWithAuthResult: this.signInResult
          }
        });
      }
    }, 100);

  }
};
</script>

当我打开登录页面时，错误返回：

未捕获的ReferenceError：未定义firebase 在新的环境（firebase-ui-auth__en.js：formatted：10762）在login.js：59

Answer 1

在我将其添加到/pages/Login.vue

后，此方法成功了

beforeMount() {
  window.firebase = firebase;
},

我想firebaseui cdn需要window对象中的firebase对象。我想知道这是外部资源为前端工作的本质吗？有想法吗？

将firebaseui CDN与nuxt.js集成，firebase未定义错误

1 个答案: