运行时配置

了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。

如果你希望在 Nuxt 3 应用中引用环境变量，你将需要使用运行时配置。

在组件中引用这些变量时，你必须在 setup 方法（或 Nuxt 插件）中使用 useRuntimeConfig 组合式函数。

在你的应用的 server/ 部分，你可以无需导入直接使用 useRuntimeConfig。

迁移

将你在应用中使用的任何环境变量添加到 nuxt.config 文件的 runtimeConfig 属性中。
在你应用的 Vue 部分，将 process.env 迁移为使用 useRuntimeConfig。

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅在服务器上可用的私有配置
    apiSecret: '123',
    // public 中的配置也会暴露给客户端
    public: {
      apiBase: '/api',
    },
  },
})

<script setup lang="ts">
const config = useRuntimeConfig()

// 取代 process.env，你现在将访问 config.public.apiBase
console.log(config.public.apiBase)
</script>

export default defineEventhandler((event) => {
  const config = useRuntimeConfig()
  // 在服务器端，你现在可以访问 config.apiSecret，此外还有 config.public
  console.log(config.apiSecret)
  console.log(config.public.apiBase)
})

# 运行时配置值会在运行时被匹配的环境变量自动替换
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org