---
title: "运行时配置"
description: "了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/migration/runtime-config"
---
# 运行时配置

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

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

在组件中引用这些变量时，你需要在 setup 方法（或 Nuxt 插件）中使用 [`useRuntimeConfig`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-runtime-config) 组合式函数。

在应用的 `server/` 部分，你可以直接使用 [`useRuntimeConfig`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-runtime-config)，无需导入。

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/guide/going-further/runtime-config"}
::

## 迁移步骤

1. 将应用中使用的所有环境变量添加到 `nuxt.config` 文件的 `runtimeConfig` 属性中。
2. 将应用的 Vue 部分中所有的 `process.env` 迁移为 [`useRuntimeConfig`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-runtime-config)。

::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  runtimeConfig: {
    // 只在服务器端可用的私有配置
    apiSecret: '123',
    // public 里的配置也会暴露给客户端
    public: {
      apiBase: '/api',
    },
  },
})
```

```vue [pages/index.vue]
<script setup lang="ts">
const config = useRuntimeConfig()

// 不再使用 process.env，改为访问 config.public.apiBase
console.log(config.public.apiBase)
</script>
```

```ts [server/api/hello.ts]
export default defineEventhandler((event) => {
  const config = useRuntimeConfig(event)
  // 在服务器端，可以访问 config.apiSecret 以及 config.public
  console.log(config.apiSecret)
  console.log(config.public.apiBase)
})
```

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


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.