如何在Nuxt应用中为Firebase可调用函数配置生产环境URL

核心原因是你在nuxt.config.js中给functions服务固定配置了emulatorPort: 5001，@nuxtjs/firebase模块只要检测到该配置项存在，就会在自动生成的service.functions.js中默认注入模拟器调用代码，和运行环境无关。

第一步：修改nuxt.config.js的functions配置 #

根据你的环境变量动态控制是否加载模拟器配置：

module.exports = {
  modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          // 保留原有的应用配置
        },
        services: {
          functions: {
            location: 'us-central1',
            // 仅本地开发环境添加模拟器配置
            ...(process.env.NUXT_ENV_FUNCTIONS === 'local' ? { emulatorPort: 5001 } : {})
          }
        }
      }
    ]
  ],
  // 其他原有配置保持不变
}

第二步：重新生成firebase服务文件 #

删除项目根目录下自动生成的nuxt/firebase文件夹，之后重新运行本地开发或者生产构建命令，模块会根据最新配置重新生成对应的服务文件：

• 本地开发环境生成的service.functions.js会保留模拟器调用代码
• 生产构建生成的service.functions.js不会包含useFunctionsEmulator相关代码，自动使用Firebase云函数的生产地址

补充说明 #

你之前自行定义的env.functionsURL变量仅对你手动调用该变量的逻辑生效，@nuxtjs/firebase封装的$fire.functions实例不会读取该自定义变量，走的是模块自身的配置规则，所以不需要在可调用函数场景下使用该变量。 #

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