如何在VanillaJS文件中获取Nuxt/Vue实例的this上下文？

问题原因 #

普通.js文件不在Nuxt的上下文环境中，没有绑定Nuxt实例，所以this.nuxt会返回undefined，进而触发读取属性的报错。

解决方法 #

方法1：直接导入nuxt.config文件 #

如果你的配置文件没有动态生成的内容，可以直接在普通JS文件里导入配置：

// aNormalJsFile.js
import nuxtConfig from './nuxt.config.js' // 路径根据文件实际位置调整

if (nuxtConfig.module.triggers.isActive) {
  // 执行逻辑
}

注意：如果nuxt.config里包含依赖Nuxt环境的动态配置（比如Nuxt构建时注入的process.env变量），这种方法可能无法获取到正确值，因为普通JS文件的执行时机早于Nuxt环境初始化。

方法2：通过Nuxt插件传递实例 #

如果函数需要依赖完整Nuxt实例或在Nuxt启动阶段执行，可以将函数改为接收实例参数，再在Nuxt插件中调用：

1. 改写函数，接收nuxt实例作为参数：

// aNormalJsFile.js
export function checkTrigger(nuxt) {
  if (nuxt.options.module.triggers.isActive) {
    // 执行逻辑
  }
}

2. 创建Nuxt插件并调用函数：

// plugins/trigger-check.js
import { checkTrigger } from '../aNormalJsFile.js'

export default (context) => {
  checkTrigger(context.nuxt)
}

3. 在nuxt.config.js中注册插件：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/trigger-check.js'
  ]
}

方法3：在Vue组件/页面中传入上下文 #

如果函数是在Vue组件或页面中使用，可从组件上下文获取Nuxt实例并传入：

// aNormalJsFile.js
export function checkTrigger(nuxt) {
  if (nuxt.options.module.triggers.isActive) {
    // 执行逻辑
  }
}

// 在Vue组件内
import { checkTrigger } from '@/aNormalJsFile.js'

export default {
  mounted() {
    checkTrigger(this.$nuxt)
  }
}

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