如何根据.env变量让Nuxt 2的nuxt-link模拟普通<a>标签行为？

方案1：全局自定义组件替代nuxt-link #

适合全站点统一替换，无需逐个页面修改：

1. 在components目录下新建CustomNuxtLink.vue组件：

<template>
  <component
    :is="isMPAMode ? 'a' : 'nuxt-link'"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot />
  </component>
</template>

<script>
export default {
  name: 'CustomNuxtLink',
  computed: {
    isMPAMode() {
      // 环境变量为字符串类型，需用字符串比较
      return process.env.ENABLE_MPA_MODE === 'true'
    }
  }
}
</script>

2. 在nuxt.config.js中全局注册组件，之后所有页面可直接使用<custom-nuxt-link>：

export default {
  components: {
    CustomNuxtLink: '~/components/CustomNuxtLink.vue'
  }
}

若想直接替换原<nuxt-link>，可将组件名设为NuxtLink，全局注册后会覆盖内置组件。

方案2：单个页面动态切换标签 #

仅需在部分页面修改时，可直接在页面内根据环境变量动态渲染标签：

<template>
  <component
    :is="isMPAMode ? 'a' : 'nuxt-link'"
    :href="isMPAMode ? '/target-route' : undefined"
    :to="!isMPAMode ? '/target-route' : undefined"
  >
    跳转至目标页面
  </component>
</template>

<script>
export default {
  computed: {
    isMPAMode() {
      return process.env.ENABLE_MPA_MODE === 'true'
    }
  }
}
</script>

关键配置注意事项 #

1. 确保.env变量正确加载：
   Nuxt 2需安装@nuxtjs/dotenv模块读取.env文件，安装后在nuxt.config.js中配置：

   modules: [
     '@nuxtjs/dotenv'
   ]
   

   然后在项目根目录的.env文件中定义变量：

   ENABLE_MPA_MODE=true
   

2. 环境变量类型处理：
   .env中的变量均为字符串，判断时必须用=== 'true'，不能直接用布尔值比较（process.env.ENABLE_MPA_MODE === true会不生效）。

3. 生产环境变量注入：
   生产构建时，需确保环境变量被正确注入，可在nuxt.config.js的env选项中显式声明：

   export default {
     env: {
       ENABLE_MPA_MODE: process.env.ENABLE_MPA_MODE || 'false'
     }
   }
   

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