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)
在 Vue 模板中，可以使用
$config.public 访问公开的运行时配置。序列化
在传递给 Nitro 之前，您的运行时配置将被序列化。这意味着任何无法序列化和反序列化的内容（如函数、Set、Map 等）都不应该设置在 nuxt.config 中。
如果您想将非可序列化的对象或函数从 nuxt.config 中传递给应用程序，可以将此代码放在 Nuxt 或 Nitro 的插件或中间件中。
环境变量
提供配置的最常见方式是使用环境变量。
Nuxt CLI 内置支持在开发、构建和生成过程中读取
.env 文件。但是当您运行构建后的服务器时，不会读取您的 .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() 来访问运行时配置。
在客户端和服务器端的行为不同：
如果您想在任何（自定义）插件中使用运行时配置，可以在您的
您也可以在服务器路由中使用
Nuxt 尝试使用 unjs/untyped 从提供的运行时配置自动生成 TypeScript 接口。但也可以手动为运行时配置添加类型：
- 在客户端，只有
runtimeConfig.public中的键才可用，并且该对象是可写和响应式的。 - 在服务器端，整个运行时配置都可用于服务器端，但为了避免上下文共享，它是只读的。 ::
pages/index.vue
<script setup lang="ts">
const config = useRuntimeConfig()
console.log('运行时配置:', config)
if (process.server) {
console.log('API 密钥:', config.apiSecret)
}
</script>
<template>
<div>
<div>请检查开发者控制台！</div>
</div>
</template>
安全提示： 注意不要通过渲染或传递给
useState 来暴露运行时配置键给客户端。插件
如果您想在任何（自定义）插件中使用运行时配置，可以在您的 defineNuxtPlugin 函数内部使用 useRuntimeConfig()。plugins/config.ts
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
console.log('API 基础 URL:', config.public.apiBase)
});
服务器路由
您也可以在服务器路由中使用 useRuntimeConfig 访问运行时配置。server/api/test.ts
export default defineEventHandler(async (event) => {
const { apiSecret } = useRuntimeConfig(event)
const result = await $fetch('https://my.api.com/test', {
headers: {
Authorization: `Bearer ${apiSecret}`
}
})
return result
})
将事件作为参数传递给
useRuntimeConfig 是可选的，但建议传递它以便在服务器路由的运行时配置被环境变量覆盖时，获取运行时配置。对运行时配置进行类型定义
Nuxt 尝试使用 unjs/untyped 从提供的运行时配置自动生成 TypeScript 接口。但也可以手动为运行时配置添加类型：index.d.ts
declare module 'nuxt/schema' {
interface RuntimeConfig {
apiSecret: string
}
interface PublicRuntimeConfig {
apiBase: string
}
}
// 当增强类型时，确保始终导入/导出某些内容是很重要的
export {}