运行时配置 Runtime Config

Nuxt 提供了一个运行时配置 API 来公开应用程序和服务器路由中的配置，并能够通过设置环境变量在运行时更新它。

公开运行时配置

要将配置和环境变量暴露给应用程序的其余部分，您需要在 nuxt.config 文件中定义运行时配置，使用 runtimeConfig 选项.

示例:

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅在服务器端可用的私钥
    apiSecret: '123',
    // 公共密钥，也将暴露给客户端
    public: {
      apiBase: '/api'
    }
  }
})

将 apiBase 添加到 runtimeConfig.public 时，Nuxt 将其添加到每个页面负载中。我们可以在服务器和浏览器中普遍访问 apiBase 。

const runtimeConfig = useRuntimeConfig()

console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)

使用 Options API 时，公共运行时配置可通过 this.$config.public 获得。

序列化

在传递给 Nitro 之前，您的运行时配置将被序列化。这意味着任何不能序列化然后反序列化的东西(比如函数、集合、映射等)都不应该在你的 nuxt.config 中设置。

您可以将此代码放在 Nuxt 或 Nitro 插件或中间件中，而不是将不可序列化的对象或函数从您的 nuxt.config 传递到您的应用程序中。

环境变量

提供配置的最常见方法是使用环境变量。

Nuxi CLI 内置支持在开发、构建和生成过程中读取.env文件。但是当你运行你构建的服务器时，你的 .env 文件不会被读取。

相关阅读：docs > nuxtjs > dirs > env

运行时配置值在运行时自动替换为匹配的环境变量。有两个关键要求。

您需要的变量必须在您的 nuxt.config 中定义。这可确保任意环境变量不会暴露给您的应用程序代码。
只有特别命名的环境变量才能覆盖运行时配置属性。也就是说，一个以 NUXT_ 开头的大写环境变量，它使用 _ 来分隔键和大小写变化。

示例

.env

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // 可以被 NUXT_API_SECRET 环境变量覆盖
    public: {
      apiBase: '', // 可以被 NUXT_PUBLIC_API_BASE 环境变量覆盖
    }
  },
})

访问运行时配置

Vue 应用程序

在 Nuxt 应用程序的 Vue 部分，您需要调用 useRuntimeConfig() 来访问运行时配置。

**注意：**客户端和服务器端的行为不同：

在客户端，只有 public 中的键可用，并且该对象既可写又可响应。整个运行时配置在服务器端可用，但它是只读的以避免上下文共享。

vue

<script setup>
const config = useRuntimeConfig()
console.log('Runtime config:', config)
if (process.server)
  console.log('API secret:', config.apiSecret)
</script>

<template>
  <div>
    <div>检查开发者控制台！</div>
  </div>
</template>

🛑 安全说明： 注意不要通过渲染它们或将它们传递给 useState 来将运行时配置密钥暴露给客户端。

useRuntimeConfig only works during setup or Lifecycle Hooks.

插件

如果你想在任何(自定义)插件中使用运行时配置，你可以在你的 defineNuxtPlugin 函数中使用 useRuntimeConfig()。

例如：

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  console.log('API base URL:', config.public.apiBase)
})

服务器路由

您也可以使用 useRuntimeConfig 在服务器路由中访问运行时配置。

export default async () => {
  const result = await $fetch('https://my.api.com/test', {
    headers: {
      Authorization: `Bearer ${useRuntimeConfig().apiSecret}`
    }
  })
  return result
}

手动输入运行时配置

Nuxt 尝试使用 unjs/untyped 从提供的运行时配置自动生成 typescript 接口。

也可以手动输入运行时配置：

index.d.ts

declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
    public: {
      apiBase: string
    }
  }
}
// 确保在扩充类型时导入/导出某些内容始终很重要
export {}