运行时配置
Nuxt 提供了一种运行时配置 API，用于在应用程序中暴露配置和机密。
暴露
为了向应用程序的其他部分暴露配置和环境变量，您需要在 nuxt.config 文件中定义运行时配置，使用 runtimeConfig 选项。
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
// 只有服务器端可用的私有密钥
apiSecret: '123',
// public 中的键也将暴露给客户端
public: {
apiBase: '/api'
}
}
})
当将 apiBase 添加到 runtimeConfig.public 中时，Nuxt 将其添加到每个页面的有效载荷中。我们可以在服务器和浏览器中普遍访问 apiBase。
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)
可以在 Vue 模板中通过
$config.public 访问公共运行时配置。序列化
您的运行时配置在传递给 Nitro 之前会被序列化。这意味着任何不能序列化然后反序列化（例如函数、集合、地图等）的东西，都不应该在您的 nuxt.config 中设置。
代替从您的 nuxt.config 将不可序列化的对象或函数传递到应用程序中，您可以将代码放在 Nuxt 或 Nitro 插件或中间件中。
环境变量
提供配置最常见的方法是通过使用 环境变量。
Nuxi CLI 在开发、构建和生成时都有内置的支持来读取您的
.env 文件。但是当您运行构建的服务器时，您的 .env 文件将不会被读取。运行时配置值在运行时自动被匹配的环境变量替换。
有两个关键要求：
- 您希望的变量必须在您的
nuxt.config中定义。这确保了任意环境变量不会暴露给应用程序代码。 - 只有特别命名的环境变量可以覆盖运行时配置属性。也就是说，以
NUXT_开头的 uppercase 环境变量，使用_来分隔键和大小写变化。
将
runtimeConfig 值的默认值设置为 不同命名的环境变量（例如将 myVar 设置为 process.env.OTHER_VARIABLE）只能在构建时工作，但在运行时会中断。
建议使用与 runtimeConfig 对象结构匹配的环境变量。示例
.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 App
在 Nuxt 应用程序的 Vue 部分，您需要调用 useRuntimeConfig() 来访问运行时配置。
客户端和服务器端的行为不同：
- 在客户端，只有
runtimeConfig.public中的键可用，并且对象是可写的和可响应的。 - 在服务器端，整个运行时配置在服务器端可用，但它是只读的，以避免上下文共享。
pages/index.vue
<script setup lang="ts">
const config = useRuntimeConfig()
console.log('Runtime config:', config)
if (import.meta.server) {
console.log('API secret:', 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 base 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
})
类型化运行时配置
Nuxt 尝试使用 unjs/untyped 自动从提供的运行时配置生成一个 TypeScript 接口。
但是，也可以手动类型化您的运行时配置：
index.d.ts
declare module 'nuxt/schema' {
interface RuntimeConfig {
apiSecret: string
}
interface PublicRuntimeConfig {
apiBase: string
}
}
// 当扩展类型时，总是重要的是确保您导出/导入某些东西
export {}
nuxt/schema 被提供为 Nuxt 在项目中使用的模式的方便访问。模块作者应该扩展 @nuxt/schema 而不是 nuxt/schema。