useRuntimeConfig · Nuxt Composables

用法

app.vue

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

server/api/foo.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})

在文档 > 指南 > 深入了解 > 运行时配置中阅读更多内容。

定义运行时配置

下面的示例展示了如何设置公共 API 基础 URL 和仅在服务器上可访问的私有 API 令牌。

我们应该始终在 nuxt.config 中定义 runtimeConfig 变量。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys are only available on the server
    apiSecret: '123',

    // Public keys that are exposed to the client
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

需要在服务器上访问的变量直接添加到 runtimeConfig 中。需要在客户端和服务器上都访问的变量在 runtimeConfig.public 中定义。

在文档 > 指南 > 深入了解 > 运行时配置中阅读更多内容。

访问运行时配置

要访问运行时配置，我们可以使用 useRuntimeConfig() 组合式函数

server/api/test.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Access public variables
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Access a private variable (only available on the server)
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return result
}

在此示例中，由于 apiBase 是在 public 命名空间中定义的，因此它可以在服务器端和客户端普遍访问，而 apiSecret **仅在服务器端可访问**。

环境变量

可以使用以 NUXT_ 为前缀的匹配环境变量名称来更新运行时配置值。

在文档 > 指南 > 深入了解 > 运行时配置中阅读更多内容。

使用 `.env` 文件

我们可以在 .env 文件中设置环境变量，以便在 **开发** 和 **构建/生成** 期间访问它们。

.env

NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"

在 **开发** 和 **构建/生成** 期间，Nuxt 应用中使用 process.env 来访问 .env 文件中设置的任何环境变量。

在 **生产运行时**，您应该使用平台环境变量，而不是使用 .env。

在文档 > 指南 > 目录结构 > Env中阅读更多内容。

`app` 命名空间

Nuxt 在运行时配置中使用 app 命名空间，其中包含 baseURL 和 cdnURL 等键。您可以通过设置环境变量在运行时自定义它们的值。

这是一个保留的命名空间。您不应在 app 中引入其他键。

`app.baseURL`

默认情况下，baseURL 设置为 '/'。

但是，可以通过将 NUXT_APP_BASE_URL 设置为环境变量，在运行时更新 baseURL。

然后，您可以使用 config.app.baseURL 访问此新的基础 URL

/plugins/my-plugin.ts

export default defineNuxtPlugin((NuxtApp) => {
  const config = useRuntimeConfig()

  // Access baseURL universally
  const baseURL = config.app.baseURL
})

`app.cdnURL`

此示例展示了如何设置自定义 CDN URL 并使用 useRuntimeConfig() 访问它们。

您可以使用自定义 CDN 来服务 .output/public 中的静态资源，使用 NUXT_APP_CDN_URL 环境变量。

然后使用 config.app.cdnURL 访问新的 CDN URL。

server/api/foo.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Access cdnURL universally
  const cdnURL = config.app.cdnURL
})

在文档 > 指南 > 深入了解 > 运行时配置中阅读更多内容。

useRouter

useRouter composable 返回路由实例。

useRuntimeHook

在 Nuxt 应用程序中注册运行时钩子，并确保在作用域销毁时正确释放。