Nuxt SPA部署至Firebase Hosting如何从__/firebase/init.js读取配置

Nuxt SPA 完全可以实现从Firebase Hosting自带的/__/firebase/init.js动态读取配置，不需要构建阶段硬编码参数，你当前的报错是配置规则冲突导致的，按以下步骤修正即可：

1. 修正nuxt.config.js配置 #

• 移除config字段下的所有配置项：当onFirebaseHosting: true开启时，模块会自动跳过构建阶段的静态配置，优先读取Firebase Hosting注入的动态配置，你预留的空production配置会被模块优先读取，导致配置缺失报错。
• 新增firebaseVersion字段：填写与你项目依赖中firebase包版本完全一致的版本号，模块会用该版本号拼接Firebase Hosting内置SDK的加载路径。

修正后的参考配置：

[
  '@nuxtjs/firebase',
  {
    onFirebaseHosting: true,
    // 替换为你项目实际安装的firebase版本号，例如9.23.0
    firebaseVersion: 'x.x.x',
    services: {
      auth: {
        persistent: 'local',
        initialize: {
          onAuthStateChangedAction: 'onAuthStateChanged',
        },
        ssr: false,
      },
    },
  },
]

2. 修正firebase.json重写规则 #

确保Firebase Hosting不会把/__/开头的系统路径重写到SPA的index.html，否则init.js会返回404无法加载：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "!/__/**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 额外注意事项 #

• 不要开启customEnv: true配置，该配置会强制模块读取环境变量的静态配置，跳过Firebase Hosting动态配置加载逻辑。
• 如果你使用了Service Worker/PWA功能，确保/__/开头的路径被添加到忽略缓存列表，避免缓存旧的配置内容。

内容的提问来源于stack exchange，提问作者Yousof K.