執行階段設定
Nuxt 提供執行階段設定 API，以便在您的應用程式中公開設定和機密資訊。
公開
若要將設定和環境變數公開給應用程式的其他部分，您需要在 nuxt.config 檔案中使用 runtimeConfig 選項來定義執行階段設定。
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
// The private keys which are only available within server-side
apiSecret: '123',
// Keys within public, will be also exposed to the client-side
public: {
apiBase: '/api'
}
}
})
當將 apiBase 新增至 runtimeConfig.public 時，Nuxt 會將其新增至每個頁面酬載。我們可以在伺服器和瀏覽器中通用地存取 apiBase。
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)
公開執行階段設定可在 Vue 範本中使用
$config.public 來存取。序列化
您的執行階段設定在傳遞到 Nitro 之前會先被序列化。這表示任何無法被序列化然後再反序列化的內容（例如函式、Sets、Maps 等等）都不應該在您的 nuxt.config 中設定。
您可以將此程式碼放置在 Nuxt 或 Nitro 外掛程式或中介軟體中，而不是將無法序列化的物件或函式從您的 nuxt.config 傳遞到您的應用程式中。
環境變數
提供設定最常見的方式是使用環境變數。
Nuxi CLI 內建支援在開發、建置和產生時讀取您的
.env 檔案。但是，當您執行已建置的伺服器時，您的 .env 檔案將不會被讀取。執行階段設定值會在執行階段自動被符合的環境變數取代。
有兩個關鍵要求
- 您想要的變數必須在您的
nuxt.config中定義。這可確保任意的環境變數不會暴露於您的應用程式程式碼中。 - 只有特別命名的環境變數可以覆寫執行階段設定屬性。也就是說，一個以
NUXT_開頭的大寫環境變數，它使用_來分隔鍵和大小寫變更。
將
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: '', // can be overridden by NUXT_API_SECRET environment variable
public: {
apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
}
},
})
讀取
Vue 應用程式
在您的 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>Check developer console!</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
}
}
// It is always important to ensure you import/export something when augmenting a type
export {}
nuxt/schema 作為方便終端使用者存取 Nuxt 在專案中所使用的 schema 版本而提供。模組作者應該改為擴充 @nuxt/schema。