useRuntimeConfig

原始檔
使用 useRuntimeConfig 可組合項訪問執行時配置變數。

使用

app/app.vue
<script setup lang="ts">
const config = useRuntimeConfig()
</script>
server/api/foo.ts
export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})
在文件 > 4 X > 指南 > 深入 > 執行時配置中閱讀更多內容。

定義執行時配置

以下示例展示瞭如何設定公共 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 中定義。
在文件 > 4 X > 指南 > 深入 > 執行時配置中閱讀更多內容。

訪問執行時配置

要訪問執行時配置，我們可以使用 useRuntimeConfig() 可組合項

server/api/test.ts
export default defineEventHandler(async (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_ 為字首的匹配環境變數名稱來更新執行時配置值。

在文件 > 4 X > 指南 > 深入 > 執行時配置中閱讀更多內容。

使用 .env 檔案

我們可以在 .env 檔案中設定環境變數，以便在開發和構建/生成期間訪問它們。

.env
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
在 Nuxt 應用程式的開發和構建/生成期間，.env 檔案中設定的任何環境變數都使用 process.env 訪問。
在生產執行時，您應該使用平臺環境變數，並且不使用 .env。
在文件 > 4.x > 指南 > 目錄結構 > 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() 訪問它們。

您可以使用 NUXT_APP_CDN_URL 環境變數為 .output/public 中的靜態資產提供服務。

然後使用 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
})
在文件 > 4 X > 指南 > 深入 > 執行時配置中閱讀更多內容。