如何检测当前项目使用的是Nuxt.js而非纯Vue环境

核心可行方案 #

以下方案同时兼容Nuxt 2、Nuxt 3、纯Vue 2/Vue 3项目，覆盖客户端、服务端渲染双场景，判断可靠性远高于检测组件是否注册这类易被干扰的逻辑。

• 运行时动态判断（适配所有引入场景）
  Nuxt框架运行时会在全局对象、Vue实例上注入专属的上下文标记，通过这些标记可以准确识别环境，工具函数实现如下：

  export const isNuxt = (() => {
    // 服务端场景：Nuxt运行时会在process.versions写入nuxt版本标记
    if (typeof process !== 'undefined' && process.versions?.nuxt) return true
    // 客户端场景：Nuxt会在window挂载全局实例与专属API
    if (typeof window !== 'undefined') {
      return !!(
        window.__nuxt // Nuxt3 客户端全局实例
        || window.$nuxt // Nuxt2 客户端全局实例
        || typeof window.useNuxtApp === 'function' // Nuxt3 全局暴露的组合式API
      )
    }
    // 组件内部兜底判断：读取当前Vue实例上的Nuxt注入对象
    return (vueInstance) => {
      if (!vueInstance) return false
      return !!(
        vueInstance.appContext?.app?.config?.globalProperties?.$nuxt // Vue3 + Nuxt 实例标记
        || vueInstance.proxy?.$nuxt // Vue2 + Nuxt 实例标记
      )
    }
  })()
  

  这个写法做了分层判断：在组件外调用时直接返回布尔值，在组件内调用时可以传入当前Vue实例做二次校验，避免全局变量被意外篡改导致的判断错误。

• 构建时静态判断（适合组件库生产场景）
  如果不需要运行时动态切换，优先用构建时判断，逻辑会被构建工具静态替换，无效分支可被tree-shaking移除，零运行时开销：

  export const isNuxt = !!(
    // Nuxt2 构建注入的环境变量
    (typeof process !== 'undefined' && (process.server || process.client))
    // Nuxt3 构建注入的ESM环境变量
    || (typeof import.meta !== 'undefined' && (import.meta.server || import.meta.client))
  )
  

  纯Vue项目不管用Vite还是Vue CLI，默认都不会注入process.server/import.meta.client这类专属变量，不会出现误判。

动态链接组件实现示例 #

以Vue 3组合式API写法为例，直接复用上述判断逻辑即可实现自动切换：

<template>
  <component :is="linkComp" v-bind="$attrs">
    <slot />
  </component>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
import { isNuxt } from './utils/env'

const currentInstance = getCurrentInstance()
const linkComp = computed(() => {
  // 组件内优先用实例级判断兜底，精度更高
  const envIsNuxt = typeof isNuxt === 'function' ? isNuxt(currentInstance) : isNuxt
  return envIsNuxt ? 'nuxt-link' : 'router-link'
})
</script>

注意：不要用「检测nuxt-link组件是否已注册」作为判断依据，部分纯Vue项目会手动注册同名组件做迁移兼容，会导致判断逻辑失效。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD