Amplify环境变量无法在Vue/Nuxt组件中加载的问题求助

针对你在AWS Amplify + Nuxt3环境下，组件内无法读取VUE_APP_前缀环境变量的问题，按以下步骤处理：

1. 确认Amplify环境变量配置 #

确保在Amplify控制台添加环境变量时，勾选了"将此变量暴露给前端构建"（对应你截图中的设置项），这是变量能被构建流程读取的前提。

2. 通过Nuxt Runtime Config传递变量 #

由于Nuxt3的客户端组件无法直接读取process.env生产环境变量（nuxt.config.js是构建阶段执行的文件，所以能正常读取），需要将变量注入到runtimeConfig.public中，让客户端组件可访问：

修改nuxt.config.js，在runtimeConfig.public下添加需要在组件中使用的变量：

$production: {
    scripts: {
      registry: {
        googleAnalytics: true
      }
    },
    runtimeConfig: {
      public: {
        scripts: {
          googleAnalytics: {
            id: process.env.VUE_APP_GOOGLE_TAG_ID
          },
        },
        // 新增组件需要的环境变量
        metaTitle: process.env.VUE_APP_META_TITLE,
        metaDescription: process.env.VUE_APP_META_DESCRIPTION,
        metaImage: process.env.VUE_APP_META_IMAGE
      },
    }
  },

3. 在组件中使用useRuntimeConfig获取变量 #

在app.vue中，替换process.env为Nuxt提供的useRuntimeConfig组合式API：

<script setup>
const config = useRuntimeConfig()

seoMeta(
  `${import.meta.dev ? '(Local) ' : ''} ${config.public.metaTitle}`,
  config.public.metaDescription,
  config.public.metaImage
);
</script>

原因说明 #

Nuxt3的客户端代码在生产构建后，process.env不会被自动替换为环境变量值。而runtimeConfig.public中的变量会被注入到客户端上下文，是Nuxt官方推荐的客户端环境变量传递方式。

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