运行时配置
学习如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。
如果您希望在 Nuxt 3 应用程序中引用环境变量，您需要使用运行时配置。
在组件中引用这些变量时，您必须在 setup 方法（或 Nuxt 插件）中使用 useRuntimeConfig 组合式 API。
在应用程序的 server/ 部分，您可以不需任何导入直接使用 useRuntimeConfig。
迁移
- 将您在应用程序中使用的任何环境变量添加到
nuxt.config文件的runtimeConfig属性中。 - 在应用程序的 Vue 部分中将
process.env迁移到useRuntimeConfig。
export default defineNuxtConfig({
runtimeConfig: {
// 仅在服务器上可用的私有配置
apiSecret: '123',
// 公共配置也会暴露给客户端
public: {
apiBase: '/api'
}
},
})
<script setup lang="ts">
const config = useRuntimeConfig()
// 您现在将通过 config.public.apiBase 访问，而不是 process.env
console.log(config.public.apiBase)
</script>
export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
// 在服务器端，您现在可以访问 config.apiSecret，此外还可以访问 config.public
console.log(config.apiSecret)
console.log(config.public.apiBase)
})
# 运行时配置值在运行时会自动被匹配的环境变量替换
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org