Nuxt中在appConfig.ts使用.env变量问题咨询

问题根源 #

你遇到的「构建/加载时能获取变量，之后变为undefined」，核心原因是环境变量的客户端访问权限问题：

• Nuxt默认会把不带NUXT_PUBLIC_前缀的.env变量限制在服务端，客户端渲染阶段无法读取
• 初始加载时（服务端渲染SSR）能拿到变量，但客户端 hydration 完成后，服务端变量无法传递到客户端，就会变成undefined

正确实现步骤 #

1. 给客户端可访问的变量加前缀
   所有需要在UI层（客户端）使用的.env变量，必须以NUXT_PUBLIC_开头，比如：

   # .env 文件示例
   NUXT_PUBLIC_UI_THEME=light
   NUXT_PUBLIC_FEATURE_FLAG=true
   

2. 在appConfig.ts中正确引用变量
   直接通过process.env读取带前缀的变量，或者结合环境模式做动态判断：

   // appConfig.ts
   export default defineAppConfig({
     ui: {
       // 基础用法：直接读取public变量
       theme: process.env.NUXT_PUBLIC_UI_THEME || 'default',
       // 动态根据运行模式切换：开发/生产环境用不同变量
       featureEnabled: process.env.NODE_ENV === 'development' 
         ? process.env.NUXT_PUBLIC_DEV_FEATURE_FLAG === 'true'
         : process.env.NUXT_PUBLIC_PROD_FEATURE_FLAG === 'true'
     }
   })
   

3. 客户端动态修改appConfig（可选）
   如果需要在UI交互中动态变更配置，可以用Nuxt提供的useAppConfig()组合式API：

   <!-- 页面组件示例 -->
   <script setup>
   const appConfig = useAppConfig()
   
   // 点击切换主题
   const toggleTheme = () => {
     appConfig.ui.theme = appConfig.ui.theme === 'light' ? 'dark' : 'light'
   }
   </script>
   
   <template>
     <button @click="toggleTheme">切换主题</button>
   </template>
   

额外注意事项 #

• 确保.env文件放在项目根目录，Nuxt 3会自动加载该文件，无需额外配置dotenv
• 如果是私有变量（仅服务端使用），不需要加NUXT_PUBLIC_前缀，这类变量不会暴露给客户端
• 若使用Nuxt 2，规则略有不同：需要在nuxt.config.js中通过publicRuntimeConfig配置客户端可访问变量

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