Vue3集成Firebase谷歌认证遇Uncaught SyntaxError错误的解决方法

错误原因分析 #

1. Vue版本冲突：main.js同时混用Vue3的createApp初始化方式和Vue2的new Vue()语法，导致应用初始化混乱，页面空白。
2. Firebase导入方式错误：当前Firebase v9+采用模块化API，不再支持import firebase from 'firebase'这种默认导入方式，这是触发语法错误的核心原因。

分步修复方案 #

1. 修复main.js的Vue3初始化代码 #

删除Vue2相关冗余代码，统一使用Vue3的createApp完成应用初始化：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import PrimeVue from 'primevue/config';
// 保留所有PrimeVue组件和指令的导入

import CodeHighlight from '@/components/CodeHighlight.vue';
import BlockViewer from '@/components/BlockViewer.vue';

import '@/assets/styles.scss';

const app = createApp(App);

app.use(router);
app.use(PrimeVue, { ripple: true });
app.use(ToastService);
app.use(DialogService);
app.use(ConfirmationService);

app.directive('tooltip', Tooltip);
app.directive('badge', BadgeDirective);
app.directive('ripple', Ripple);
app.directive('styleclass', StyleClass);

app.component('CodeHighlight', CodeHighlight);
app.component('BlockViewer', BlockViewer);

// 保留所有PrimeVue组件的注册代码

// 移除Vue2的以下代码：
// import Vue from 'vue';
// Vue.config.productionTip = false
// new Vue({...}).mount('#app');

// 改用Vue3的mount方法
app.mount('#app');

2. 升级auth.js的Firebase模块化导入 #

适配Firebase v9+的模块化API，调整firebaseui的使用方式：

首先安装最新依赖：

npm install firebase firebaseui

修改auth.js：

// 导入Firebase模块化API
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signOut, FacebookAuthProvider, GoogleAuthProvider, EmailAuthProvider } from 'firebase/auth';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css'; // 导入firebaseui样式

const config = {
  apiKey: "xxxxxxxxxxxx",
  authDomain: "xxxx-xxxxx.firebaseapp.com",
  databaseURL: "https://xxxx-xxxxx.firebaseio.com",
  projectId: "xxxx-xxxxxx",
  storageBucket: "xxxx-xxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxx"
};

const auth = {
  context: null,
  uiConfig: null,
  ui: null,
  firebaseAuth: null,

  init(context) {
    this.context = context;

    // 初始化Firebase应用
    const app = initializeApp(config);
    this.firebaseAuth = getAuth(app);

    // 配置FirebaseUI
    this.uiConfig = {
      signInSuccessUrl: '/dashboard', // 添加斜杠确保路由跳转正确
      signInOptions: [
        FacebookAuthProvider.PROVIDER_ID,
        GoogleAuthProvider.PROVIDER_ID,
        EmailAuthProvider.PROVIDER_ID
      ]
    };
    this.ui = new firebaseui.auth.AuthUI(this.firebaseAuth);

    // 监听用户状态变化
    onAuthStateChanged(this.firebaseAuth, (user) => {
      this.context.$store.dispatch('user/setCurrentUser');

      const requireAuth = this.context.$route.matched.some(record => record.meta.requireAuth);
      const guestOnly = this.context.$route.matched.some(record => record.meta.guestOnly);

      if (requireAuth && !user) {
        this.context.$router.push('/auth');
      } else if (guestOnly && user) {
        this.context.$router.push('/dashboard');
      }
    });
  },
  authForm(container) {
    this.ui.start(container, this.uiConfig);
  },
  user() {
    return this.context ? this.firebaseAuth.currentUser : null;
  },
  logout() {
    signOut(this.firebaseAuth);
  }
};

export default auth;

3. 认证页面组件使用示例 #

在Auth.vue中调用auth.js的方法：

<template>
  <div id="firebaseui-auth-container"></div>
</template>

<script>
import auth from '@/auth';

export default {
  mounted() {
    auth.init(this);
    auth.authForm('#firebaseui-auth-container');
  }
};
</script>

验证修复效果 #

1. 重启开发服务器：npm run dev
2. 访问认证页面，确认FirebaseUI登录界面正常加载
3. 测试谷歌登录功能，验证用户状态变化能触发路由跳转

内容的提问来源于stack exchange，提问作者Aaron