useRuntimeConfig

用法

¥Usage

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

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

定义运行时配置

¥Define Runtime Config

以下示例展示了如何设置公共 API 基 URL 和只能在服务器上访问的秘密 API 令牌。

¥The example below shows how to set a public API base URL and a secret API token that is only accessible on the server.

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

¥We should always define runtimeConfig variables inside nuxt.config.

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'
    }
  }
})

访问运行时配置

¥Access Runtime Config

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

¥To access runtime config, we can use useRuntimeConfig() composable:

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 只能在服务器端访问。

¥In this example, since apiBase is defined within the public namespace, it is universally accessible on both server and client-side, while apiSecret is only accessible on the server-side.

环境变量

¥Environment Variables

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

¥It is possible to update runtime config values using a matching environment variable name prefixed with NUXT_.

使用 .env 文件

¥Using the .env File

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

¥We can set the environment variables inside the .env file to make them accessible during development and build/generate.

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

app 命名空间

¥app namespace

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

¥Nuxt uses app namespace in runtime-config with keys including baseURL and cdnURL. You can customize their values at runtime by setting environment variables.

app.baseURL

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

¥By default, the baseURL is set to '/'.

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

¥However, the baseURL can be updated at runtime by setting the NUXT_APP_BASE_URL as an environment variable.

然后，你可以使用 config.app.baseURL 访问这个新的基本 URL：

¥Then, you can access this new base URL using config.app.baseURL:

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

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

app.cdnURL

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

¥This example shows how to set a custom CDN url and access them using useRuntimeConfig().

你可以使用自定义 CDN，通过 NUXT_APP_CDN_URL 环境变量在 .output/public 内部提供静态资源。

¥You can use a custom CDN for serving static assets inside .output/public using the NUXT_APP_CDN_URL environment variable.

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

¥And then access the new CDN url using config.app.cdnURL.

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

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