VueFire对接Firebase本地模拟器：认证功能配置问题求助

问题概述 #

Firestore本地模拟器可正常工作，但认证功能始终指向Firebase生产服务器，无法对接本地认证模拟器。使用Vite作为开发服务器，已通过firebase init hosting完成配置，public目录指向./dist。

初始配置代码 #

firebase.json配置 #

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "./dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "us-central1"
    }
  },
  "emulators": {
    "auth": {
      "host": "localhost",
      "port": 9099
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5002
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

main.ts配置 #

app.use(VueFire, {
  firebaseApp,
  modules: [VueFireAuth()]
})

初始firebase.ts配置 #

import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: 'my api key',
  authDomain: 'xxxxx.firebaseapp.com',
  projectId: 'xxxxx',
  appId: 'my app id'
}
export const firebaseApp = initializeApp(firebaseConfig)

SignUpPage.vue脚本代码 #

<script setup>
import { ref } from 'vue'
import { useFirebaseAuth } from 'vuefire'
import { createUserWithEmailAndPassword } from '@firebase/auth'

import BaseButton from '@/components/base/BaseButton.vue'
import BaseContainer from '@/components/base/BaseContainer.vue'
import BaseCard from '@/components/base/BaseCard.vue'
import BaseForm from '@/components/base/BaseForm.vue'
import BaseInput from '@/components/base/BaseInput.vue'

const newUser = ref({
  email: '',
  password: ''
})

const auth = useFirebaseAuth()

async function createUser() {
  createUserWithEmailAndPassword(auth, newUser.value.email, newUser.value.password)
    .then((userCredential) => {
      // Signed in
      const user = userCredential.user
      console.log(user)
      // ...
    })
    .catch((error) => {
      const errorCode = error.code
      const errorMessage = error.message
      console.log(`${errorCode}: ${errorMessage}`)
    })
}
</script>

解决方案 #

参考David East的视频内容，修改firebase.ts为以下代码后，认证功能成功对接本地模拟器：

import { initializeApp, getApps } from 'firebase/app'
import { getAuth } from 'firebase/auth'

function initialize(existingApp) {
  const firebaseApp = existingApp || initializeApp()
  const auth = getAuth(firebaseApp)
  return { firebaseApp, auth }
}

export function getFirebase() {
  const existingApp = getApps().at(0)
  return initialize(existingApp)
}

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