useRuntimeConfig
使用 useRuntimeConfig composable 存取執行階段設定變數。
用法
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() composable
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 檔案內設定環境變數，使其在開發和 build/generate 期間可存取。
.env
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
在 開發和 build/generate 期間，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
})