运行时配置
学习如何从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中的配置也会暴露给客户端
public: {
apiBase: '/api'
}
},
})
<script setup lang="ts">
const config = useRuntimeConfig()
// 不再使用process.env,现在将访问config.public.apiBase
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