useRuntimeConfig · Nuxt Composables

用法

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 token。

我們應該始終在 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 檔案中，以便在**開發**和**建置/產生**期間存取它們。

.env

NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"

在 **開發** 和 **建置/產生** 期間，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
})

請參閱文件 > 指南 > 進階應用 > 執行階段配置以了解更多資訊。

useRouter

useRouter composable 會返回路由器實例。

useRuntimeHook

在 Nuxt 應用程式中註冊一個執行階段鉤子，並確保在範圍銷毀時正確釋放。