Nuxt 3 runtimeConfig返回undefined，新增变量后配置全部失效求助

问题场景 #

使用Nuxt的runtimeConfig时，仅保留单个public字段（如官方基础示例）能正常读取，但新增嵌套对象或额外字段后，所有public配置均返回undefined。

修复方案 #

1. 移除配置中的尾逗号 #

对象末尾的多余逗号可能导致配置解析失败，这是最常见的原因。比如添加anotherKey时的尾逗号会让整个runtimeConfig无法正确加载：

错误配置：

runtimeConfig: {
  apiSecret: '123',
  public: {
    apiBase: '/api',
    anotherKey: 'test', // 此处尾逗号引发问题
  }
}

修正后：

runtimeConfig: {
  apiSecret: '123',
  public: {
    apiBase: '/api',
    anotherKey: 'test'
  }
}

2. 确保嵌套对象语法正确 #

嵌套对象本身是支持的，但要保证整个配置结构没有语法错误。比如你的local嵌套对象配置修正后如下：

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: process.env.API_URL,
      local: {
        client_id: 'id goes here',
        client_secret: 'ueyqwriwyriry'
      }
    }
  }
})

3. 重启Nuxt开发服务器 #

修改nuxt.config.ts后，热重载不会重新解析runtimeConfig，必须完全重启开发服务器才能让新配置生效。

4. 验证环境变量加载情况 #

如果依赖process.env.API_URL这类环境变量，先在nuxt.config.ts中打印确认变量是否正确加载：

console.log('Loaded API_URL:', process.env.API_URL)

export default defineNuxtConfig({
  // ... 其他配置
})

5. 客户端正确读取配置 #

确保在组件中正确调用useRuntimeConfig()，且仅访问public命名空间下的字段（非public字段仅服务端可访问）：

<!-- index.vue -->
<script setup>
const config = useRuntimeConfig()

console.log(config.public.local.client_id)
console.log(config.public.apiUrl)
</script>

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