РЕПЕТИТОР математика физика информатика
Для школьников и студентов. Подтягивание пробелов. ЦЭ, ЦТ, ОГЭ, ЕГЭ.
Идет набор на ЛЕТО. Жмите для подробностей:)
⊗jsnuSpCfInr 51 of 90 menu
◀ ▶

Введение в конфигурацию в Nuxt

Не каждое поведение сайта удобно описывать отдельной страницей или серверным обработчиком. Иногда достаточно один раз записать правило в конфигурации, и Nuxt будет применять его ко всем подходящим запросам. Такие правила не требуют нового компонента Vue: они работают на уровне маршрутизации и ответа ещё до того, как выберется страница из app/pages.

В корне проекта лежит nuxt.config.ts - файл, который Nuxt создаёт при инициализации. В нём среди прочего можно описать объект routeRules. Ключ - шаблон адреса, значение - набор опций для всех запросов, которые этому шаблону соответствуют. В разделе разберём три типичных случая из routeRules: постоянный редирект со старого пути на новый, добавление HTTP-заголовков к ответу и проксирование части URL на другой хост, чтобы браузер по-прежнему обращался к вашему домену.

Редирект в routeRules отличается от навигации в коде страницы или посредника: сервер сразу отвечает кодом перенаправления. Заголовки удобны, когда одному разделу сайта нужна метка для CDN, отладки или согласованного поведения кэша. Прокси позволяет отдать данные внешнего API под префиксом вашего приложения, не раскрывая клиенту полный адрес бэкенда и не настраивая отдельный маршрут в server/routes для каждого пути.

Настройки интерфейса устроены иначе. Заголовок окна, подпись в шапке или тема оформления - это не секреты и не серверные ключи. Их хранят в app/app.config.ts через defineAppConfig. Конфиг реактивен: страницы читают его функцией useAppConfig и могут показывать одни и те же значения без дублирования строк в каждом файле. Это не runtimeConfig из nuxt.config.ts: там секреты и переменные окружения, а app.config.ts - публичные параметры вида, которые отправляются вместе с приложением.

Примеры раздела написаны на JavaScript без аннотаций типов, в структуре Nuxt 4: страницы в app/pages, корневой layout в app/app.vue. Проверять правила удобно в проекте my-app после npm create nuxt@latest и запуска npm run dev. После изменения nuxt.config.ts или app.config.ts перезапустите режим разработки, чтобы Nuxt перечитал конфигурацию. Каждый урок разбирает один приём отдельно, без опоры на файлы из соседней темы.

← →
↑
Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.
принять все настроить отклонить