useRuntimeConfig
使用 `useRuntimeConfig` 组合式函数访问运行时配置变量。
用法
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`。
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
})