Nuxt.js 如何在import语句中访问环境变量实现条件导入组件

根本原因 #

你写的静态import语句属于编译阶段执行的逻辑，执行时组件实例还未初始化，所以读不到仅运行时可用的this.$config；而未做特殊配置的自定义process.env变量默认不会注入到组件的编译上下文，所以也读不到。

可行方案，分两种场景适配 #

场景1：VAL变量构建时就固定，无需运行时修改 #

这种场景优先用该方案，打包时会自动剔除未用到的子组件，体积更优。
你只需要在nuxt.config中增加配置，把.env的VAL变量注入到编译上下文即可：

// nuxt.config.js（Nuxt2示例）
const webpack = require('webpack')
module.exports = {
  build: {
    extend(config) {
      config.plugins.push(
        new webpack.DefinePlugin({
          'process.env.VAL': JSON.stringify(process.env.VAL)
        })
      )
    }
  }
}

// nuxt.config.ts（Nuxt3示例）
export default defineNuxtConfig({
  vite: {
    define: {
      'process.env.VAL': JSON.stringify(process.env.VAL)
    }
  }
})

配置完成后你原来的静态导入写法就可以正常运行。

场景2：VAL变量运行时才确定（用publicRuntimeConfig配置） #

如果你的变量需要在打包后部署到不同环境时动态修改，就用动态异步组件的方案：

<template>
  <!-- 用动态组件标签渲染对应子组件 -->
  <component :is="ChildComp" />
</template>

<script>
export default {
  data() {
    return {
      ChildComp: null
    }
  },
  async created() {
    // 运行时可以正常读取$config变量，再动态导入对应组件
    const compPath = this.$config.VAL === 'thing' ? '@/components/child1.vue' : '@/components/child2.vue'
    this.ChildComp = (await import(compPath)).default
  }
}
</script>

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