Nuxt 3集成Firebase报错：非源码部署托管需提供配置选项

可能的问题点及对应解决方法 #

1. Firebase配置未正确注入生产环境 #

如果你的firebaseConfig是从环境变量读取的，Nuxt3在生产构建时，只有带NUXT_PUBLIC_前缀的环境变量才会暴露给客户端。检查你的环境变量命名：

• 错误示例：FIREBASE_API_KEY 或 VUE_APP_FIREBASE_API_KEY
• 正确示例：NUXT_PUBLIC_FIREBASE_API_KEY

在firebase.client.ts中正确读取配置：

const firebaseConfig = {
  apiKey: process.env.NUXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NUXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NUXT_PUBLIC_FIREBASE_APP_ID
}

2. 初始化前未校验配置完整性 #

生产环境中如果环境变量缺失，会导致firebaseConfig存在空值，触发该错误。可以在初始化前添加校验：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

export default defineNuxtPlugin(nuxtApp => {
  const firebaseConfig = {
    // 填入你的配置项或从环境变量读取
  };

  // 校验所有配置字段是否有值
  if (!Object.values(firebaseConfig).every(Boolean)) {
    throw new Error("Firebase配置不完整，请检查环境变量");
  }

  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);

  nuxtApp.provide('firebaseAuth', auth);
})

3. 未处理重复初始化场景（可选） #

虽然错误提示并非重复初始化，但添加判断可以避免潜在问题：

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";

export default defineNuxtPlugin(nuxtApp => {
  const firebaseConfig = {
    // 你的配置项
  };

  // 已有App实例则复用，否则初始化
  const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
  const auth = getAuth(app);

  nuxtApp.provide('firebaseAuth', auth);
})

4. 检查nuxt.config.ts的插件配置 #

确保插件路径和客户端标识正确：

export default defineNuxtConfig({
  plugins: [
    '~/plugins/firebase.client.ts'
  ]
})

验证步骤 #

1. 执行yarn build前，确认所有NUXT_PUBLIC_前缀的Firebase环境变量已正确设置（可在nuxt.config.ts中临时打印process.env确认）。
2. 构建完成启动预览后，检查浏览器控制台是否有环境变量加载失败的提示。

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