如何让已构建的Nuxt3应用读取Kubernetes Secrets传递的环境变量？

核心原因 #

你遇到的问题是因为Nuxt3默认会将客户端代码中的process.env变量在构建阶段静态替换，而你的镜像构建时并未注入K8 Secrets的变量，导致最终代码中这些变量值为undefined。要实现运行时动态读取容器启动时的环境变量，需要利用Nuxt3的runtimeConfig机制。

解决方案步骤 #

1. 配置Nuxt3的runtimeConfig #

在nuxt.config.ts中定义运行时配置，区分服务端私有变量和客户端公开变量（敏感密钥必须放在非public区域，仅服务端可访问）：

export default defineNuxtConfig({
  runtimeConfig: {
    // 服务端专属私有变量，不会暴露给客户端，对应K8 Secrets中的密钥
    apiSecret: process.env.API_SECRET,
    dbPassword: process.env.DB_PASSWORD,
    // 客户端可访问的公开变量（非敏感配置）
    public: {
      apiBaseUrl: process.env.API_BASE_URL
    }
  }
})

2. 在应用中读取配置 #

根据代码运行环境（服务端/客户端），使用useRuntimeConfig()获取配置：

服务端场景（API路由、Server Middleware等）

在服务端代码中可以直接读取所有runtimeConfig变量：

// server/api/secure-data.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig(event)
  // 使用从K8 Secrets传入的密钥
  const response = await fetch('https://api.example.com/secure', {
    headers: {
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return await response.json()
})

客户端场景（仅公开变量）

客户端只能访问runtimeConfig.public下的非敏感配置：

<template>
  <div>API地址: {{ apiBaseUrl }}</div>
</template>

<script setup>
const config = useRuntimeConfig()
const apiBaseUrl = config.public.apiBaseUrl
</script>

3. 验证配置生效 #

确保K8 Secrets的键名与process.env中的变量名完全一致，比如Secrets中定义的API_SECRET会自动映射到容器的process.env.API_SECRET，进而被Nuxt3的runtimeConfig读取。

额外注意事项 #

• 绝对不要在客户端代码中直接使用process.env读取敏感密钥，会导致密钥泄露到浏览器。
• 如果需要在插件中读取服务端私有配置，需标记插件为服务端专属：

// plugins/server-config.ts
export default defineNuxtPlugin({
  server: true, // 仅在服务端运行
  setup() {
    const config = useRuntimeConfig()
    // 服务端逻辑处理
  }
})

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