Learn Nuxt with a Collection of 100+ Tips!

useRuntimeConfig

Доступ к переменным runtime конфигурации с помощью композабла useRuntimeConfig.

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

app.vue
<script setup lang="ts">
const config = useRuntimeConfig()
</script>
server/api/foo.ts
export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})
Узнать больше Docs > Guide > Going Further > Runtime Config.

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

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

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

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

    // Публичные ключи, которые доступны для клиента
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})
Переменные, которые должны быть доступны на сервере, добавляются непосредственно в runtimeConfig. Переменные, которые должны быть доступны как на клиенте, так и на сервере, определяются в runtimeConfig.public.
Узнать больше Docs > Guide > Going Further > Runtime Config.

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

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

server/api/test.ts
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_.

Узнать больше Docs > Guide > Going Further > Runtime Config.

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

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

.env
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
Любые переменные окружения, установленные в файле .env доступны в приложении Nuxt во время разработки и сборки/генерации с помощью process.env.
В рантайме продакшена, следует использовать переменные окружения платформы, а .env не используется.
Узнать больше Docs > Guide > Directory Structure > Env.

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

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

Это зарезервированное пространство имен. Не следует вводить дополнительные ключи внутри app.

app.baseURL

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

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

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

/plugins/my-plugin.ts
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.

server/api/foo.ts
export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Универсальный доступ к cdnURL
  const cdnURL = config.app.cdnURL
})
Узнать больше Docs > Guide > Going Further > Runtime Config.