Firebase生产环境下Vuex调用Nuxt插件报this.$myPlugin is not a function错误

差异原因 #

Nuxt开发模式和Firebase生产云函数运行时的行为差异主要来自两个核心点：

1. 模块复用逻辑不同：开发模式下每次请求都会重新初始化所有模块，不存在状态污染问题；而Firebase云函数的Node.js运行时会复用模块单例，你插件顶层声明的env、auth等全局模块变量，在实例复用时会出现赋值错位，导致插件初始化中断，inject方法未执行。
2. 生产构建的依赖加载校验更严格：开发模式不会校验插件的加载顺序，即使你的自定义插件加载时机早于@nuxtjs/firebase的注入逻辑，也能通过热重载补全依赖；但生产构建时会按配置的顺序严格加载，你的插件依赖context.app.$fire.auth，如果加载顺序早于firebase插件，初始化直接报错，自然不会注入$myPlugin。

修复方案 #

1. 修正插件写法，移除模块级全局变量 #

所有依赖获取都放在插件初始化函数内部，避免单例复用带来的状态污染，修改后的myPlugin.js参考：

export default (context, inject) => {
  // 所有变量都放在初始化函数内部声明，不要放到模块顶层
  const { env, $fire: { auth } } = context.app
  const { store } = context

  async function myPlugin(...args) {
    // 业务逻辑直接使用上方声明的变量即可
  }

  // 同时注入到实例和store，避免绑定问题
  inject('myPlugin', myPlugin)
  context.store.$myPlugin = myPlugin
}

2. 调整插件加载顺序 #

确认nuxt.config.js中@nuxtjs/firebase模块的配置在plugins数组之前，保证firebase插件先完成注入，再加载你的自定义插件：

// nuxt.config.js
modules: [
  '@nuxtjs/firebase',
  // 其他模块...
],
plugins: [
  { src: '~/plugins/myPlugin', mode: 'all' },
],

3. 调整Vuex调用方式，避免this绑定异常 #

生产环境下Vuex action的this绑定可能出现错位，直接从store上下文调用注入的方法更稳妥，修改someModule.js：

const actions = {
  initAction({ commit, $myPlugin }) {
    // 直接从上下文取挂载的$myPlugin，不用this
    return $myPlugin(...).then(...)
  }
}

4. 检查Firebase部署配置 #

• 确认firebase.json和.firebaseignore没有排除plugins目录或.nuxt目录下的服务端构建产物
• 确认Nuxt相关依赖都放在dependencies而非devDependencies中，云函数生产部署时不会安装devDependencies的包

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