useRuntimeConfig

Использование

<script setup lang="ts">
const config = useRuntimeConfig()
</script>

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})

Определение runtime конфигурации

В примере ниже показано, как задать публичный базовый URL-адрес API и секретный API-токен, доступный только на сервере.

Мы всегда должны определять переменные runtimeConfig внутри nuxt.config.

export default defineNuxtConfig({
  runtimeConfig: {
    // Приватные ключи доступны только на сервере
    apiSecret: '123',

    // Публичные ключи, которые доступны для клиента
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

Доступ к runtime конфигурации

Чтобы получить доступ к runtime конфигурации, мы можем использовать композабл useRuntimeConfig():

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Доступ к публичным переменным
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Доступ к приватной переменной (доступна только на сервере)
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return result
}

В данном примере, поскольку apiBase определен в пространстве имен public, он универсально доступен как на сервере, так и на клиенте, в то время как apiSecret доступен только на сервере.

Переменные окружения

Можно обновлять значения runtime конфигурации, используя соответствующее имя переменной окружения с префиксом NUXT_.

Использование файла .env

Мы можем задать переменные окружения в файле .env, чтобы они были доступны во время разработки и сборки/генерации.

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

Пространство имен app

Nuxt использует пространство имен app в runtime конфигурации с ключами, включающими baseURL и cdnURL. Вы можете настроить их значения во время выполнения программы, установив переменные окружения.

app.baseURL

По умолчанию baseURL имеет значение '/'.

Однако baseURL можно обновить во время runtime, установив NUXT_APP_BASE_URL в качестве переменной окружения.

Затем вы можете получить доступ к этому новому базовому URL с помощью config.app.baseURL:

export default defineNuxtPlugin((NuxtApp) => {
  const config = useRuntimeConfig()

  // Универсальный доступ к базовому URL
  const baseURL = config.app.baseURL
})

app.cdnURL

В этом примере показано, как задать пользовательский CDN url и получить к нему доступ с помощью useRuntimeConfig().

Вы можете использовать пользовательский CDN для обслуживания статических ассетов внутри .output/public, используя переменную окружения NUXT_APP_CDN_URL.

И затем получите доступ к новому CDN url с помощью config.app.cdnURL.

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Универсальный доступ к cdnURL
  const cdnURL = config.app.cdnURL
})