Nuxt3中process.env与runtimeConfig的区别及Vimeo配置疑问

核心区别 #

1. 加载时机与灵活性 #

• process.env是Node.js原生环境变量机制，在构建阶段就会被注入到代码中（客户端代码需额外配置才能访问）。如果部署后需要修改变量，必须重新构建项目，无法动态更新。
• runtimeConfig是Nuxt3专属的配置系统，分为private（仅服务端可访问）和public（客户端/服务端均可访问）两类变量，在运行阶段读取环境变量。部署后修改环境变量无需重新构建，重启服务即可生效。

2. 安全性 #

• 若在客户端代码中直接使用process.env，敏感变量可能被打包进客户端代码，造成泄露风险。
• runtimeConfig的private字段默认仅服务端可见，public字段才会暴露给客户端，天然规避了敏感信息泄露的问题。

3. 规范与统一性 #

• Nuxt3官方明确推荐使用runtimeConfig管理跨环境配置，它提供了统一的useRuntimeConfig()方法，在服务端和客户端都能按规范获取对应变量。
• 直接使用process.env虽在服务端能生效，但不符合Nuxt生态的最佳实践，且客户端访问需额外配置（如在nuxt.config.ts中手动将变量加入publicRuntimeConfig），容易出现变量未定义的问题。

针对你的Vimeo API场景的说明 #

在server/api/vimeo这类服务端代码中，直接用process.env.VIMEO_CLIENT_ID和通过runtimeConfig获取变量，当前运行效果是一致的，因为服务端都能读取到环境变量。但更推荐使用runtimeConfig，步骤如下：

1. 在nuxt.config.ts中配置：

export default defineNuxtConfig({
  runtimeConfig: {
    // 私有变量，仅服务端可访问
    vimeoClientId: process.env.VIMEO_CLIENT_ID,
    vimeoClientSecret: process.env.VIMEO_CLIENT_SECRET,
    vimeoAccessToken: process.env.VIMEO_ACCESS_TOKEN,
    public: {
      // 若有需客户端访问的变量，添加到此处
    }
  }
})

2. 在服务端代码中获取并使用：

const config = useRuntimeConfig()
const client = new Vimeo(config.vimeoClientId, config.vimeoClientSecret, config.vimeoAccessToken)

这种方式不仅符合Nuxt的规范，还能让配置更清晰，后续调整变量作用域、动态更新环境变量时更灵活。

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