Nuxt3从.env获取Token返回undefined的问题求助

1. 规范.env文件配置 #

在项目根目录创建或编辑.env文件，敏感Token作为服务端专属变量，无需添加NUXT_前缀：

TOKEN=your_actual_basic_token_here

2. 配置nuxt.config.ts #

在nuxt.config.ts中通过runtimeConfig区分服务端和客户端可访问的变量，确保敏感Token仅服务端可见：

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅服务端可访问的敏感变量，对应.env中的TOKEN
    token: process.env.TOKEN,
    public: {
      // 此处存放客户端需要的公开变量（如API基础地址）
    }
  }
})

3. 修正请求逻辑（敏感Token必须在服务端处理） #

你当前在onMounted（客户端环境）中直接读取服务端专属的runtime变量，所以会返回undefined。以下是两种可行的修正方案：

方案A：通过Nuxt API路由转发请求 #

在server/api/users.ts中创建本地API路由，将Token验证逻辑放在服务端：

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  // 替换为真实的后端API地址
  const response = await fetch('https://your-backend-api/users', {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Basic ${config.token}`
    }
  })
  return await response.json()
})

组件中直接调用本地API路由，无需携带Token：

<script setup lang="ts">
interface User {
  nama: string;
}

const pending = ref(true)
const data = ref<User>()

onMounted(async () => {
  const response = await fetch('/api/users')
  const users = await response.json()
  data.value = users
  pending.value = false
})
</script>

方案B：在组件中使用服务端请求 #

如果不想创建单独的API路由，可通过useFetch设置server: true，让请求在服务端发起，从而访问服务端的runtime变量：

<script setup lang="ts">
interface User {
  nama: string;
}

const { data, pending } = await useFetch('https://your-backend-api/users', {
  server: true,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Basic ${useRuntimeConfig().token}`
  }
})
</script>

关键注意事项 #

• 敏感Token绝对不能暴露给客户端：服务端专属的runtime变量不会被发送到浏览器，必须在服务端环境（API路由、服务端渲染请求）中使用。
• 变量命名规则：客户端需要的公开变量必须以NUXT_PUBLIC_开头（对应nuxt.config.ts中public对象下的配置）。

内容的提问来源于stack exchange，提问作者Ahmad Muzaki SA