執行時配置
瞭解如何將 Nuxt 2 執行時配置遷移到 Nuxt 3。
如果您希望在 Nuxt 3 應用程式中引用環境變數，則需要使用執行時配置。
在元件中引用這些變數時，您必須在設定方法（或 Nuxt 外掛）中使用 useRuntimeConfig 可組合函式。
在應用程式的 server/ 部分，您可以無需任何匯入即可使用 useRuntimeConfig。
遷移
- 將您在應用程式中使用的任何環境變數新增到
nuxt.config檔案的runtimeConfig屬性中。 - 在應用程式的 Vue 部分中，將
process.env遷移到useRuntimeConfig。
export default defineNuxtConfig({
runtimeConfig: {
// Private config that is only available on the server
apiSecret: '123',
// Config within public will be also exposed to the client
public: {
apiBase: '/api',
},
},
})
<script setup lang="ts">
const config = useRuntimeConfig()
// instead of process.env you will now access config.public.apiBase
console.log(config.public.apiBase)
</script>
export default defineEventhandler((event) => {
const config = useRuntimeConfig(event)
// In server, you can now access config.apiSecret, in addition to config.public
console.log(config.apiSecret)
console.log(config.public.apiBase)
})
# Runtime config values are automatically replaced by matching environment variables at runtime
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.tw