Nuxt3中.env变量向客户端暴露异常问题排查

可能的原因及对应解决方案 #

1. .env文件未定义或变量拼写错误 #

• 检查项目根目录的.env文件，确认STAGING_URI和LOCAL_DEV_URI是否存在，且大小写完全匹配（process.env对大小写敏感，staging_uri和STAGING_URI会被识别为不同变量）。
• 若这两个变量在部分环境下可能缺失，建议添加默认值，参考redirectUri的写法：

  stagingUri: process.env.STAGING_URI || 'https://staging.yourdomain.com',
  localDevUri: process.env.LOCAL_DEV_URI || 'http://localhost:3000',
  

2. 在Nuxt上下文外部调用useRuntimeConfig() #

你在defineNuxtPlugin的回调外部直接调用了useRuntimeConfig()：

// 此处调用不符合规则，不在Nuxt上下文内
console.log(useRuntimeConfig().stagingUri, useRuntimeConfig().redirectUri);

useRuntimeConfig()是Nuxt的专属composable，只能在Nuxt上下文环境中使用，比如：

• defineNuxtPlugin的回调函数内部
• 组件的setup函数中
• 路由中间件内部

修正后将打印逻辑移到插件回调内：

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  // 此处输出的变量值才是准确的
  console.log(config.stagingUri, config.redirectUri);
  
  // ... 其他插件代码
});

3. Nuxt未正确加载.env文件 #

• 确保.env文件放在项目根目录，若使用特定环境的env文件（如开发环境.env.development、生产环境.env.production），需对应启动环境加载。
• 若使用自定义命名的env文件，需在nuxt.config.ts中配置指定：

  export default defineNuxtConfig({
    dotenv: {
      filename: '.env.custom'
    },
    // ... 其他配置
  });
  

4. 环境变量被外部平台覆盖 #

如果在CI/CD环境或部署平台（如Vercel、Netlify）运行，需确认平台的环境变量设置中是否正确配置了STAGING_URI和LOCAL_DEV_URI——平台设置的环境变量会覆盖本地.env文件的内容。

验证步骤 #

1. 在.env中明确设置变量：

   STAGING_URI="https://staging.yourdomain.com"
   LOCAL_DEV_URI="http://localhost:3000"
   

2. 重启Nuxt开发服务器（修改nuxt.config.ts或.env后必须重启才能生效）。
3. 在defineNuxtPlugin内部打印变量，检查结果是否正常。

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