Настройка
По умолчанию, Nuxt настроен так, чтобы покрыть большинство случаев. Файл nuxt.config.ts можно переписать, или расширить конфигурацию по умолчанию.
Настройка Nuxt
Файл nuxt.config.ts находится в корне проекта и может изменить или расширить поведение приложения.
Минимальный файл конфигурации экспортирует функцию defineNuxtConfig, которая содержит в себе объект с вашими настройками. Функция defineNuxtConfig доступна глобально без импорта.
export default defineNuxtConfig({
// Ваша конфигурация Nuxt
})
Этот файл будет часто упомянут в документации, например для добавления собственных скриптов, регистрации модулей или изменения режима рендеринга.
.ts для файла nuxt.config. Таким образом, вы можете воспользоваться подсказками в IDE, чтобы избежать опечаток и ошибок при изменении конфигурации.Переопределение Окружения
Вы можете настроить полностью типизованные переопределения для каждого окружения в вашем nuxt.config
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
},
$env: {
staging: {
//
}
},
})
Чтобы выбрать окружение при запуске команды Nuxt CLI, просто передайте его имя во флаг --envName, например: nuxi build --envName staging.
Чтобы узнать больше о механизме, лежащем в основе этих переопределений, обратитесь к документации c12 по конфигурации, зависящей от окружения.
$meta для предоставления метаданных, которые вы или пользователи вашего слоя можете использовать.Переменные окружения и приватные токены
API runtimeConfig предоставляет значения, такие как переменные окружения, для всего остального вашего приложения. По умолчанию эти ключи доступны только на сервере. Но ключи в runtimeConfig.public доступны также и на клиенте.
Эти значения должны быть определены в nuxt.config и могут быть переписаны с помощью переменных окружения.
export default defineNuxtConfig({
runtimeConfig: {
// Приватные ключи, доступные только на сервере
apiSecret: '123',
// Ключи внутри public также доступны и на клиенте
public: {
apiBase: '/api'
}
}
})
Эти переменные станут доступны для всего приложения с помощью композабла useRuntimeConfig().
<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>
Настройки приложения
Файл app.config.ts, находится в исходной директории (по умолчанию в корне проекта), используется для отображения общедоступных переменных, которые могут быть определены во время сборки. Вопреки опциям runtimeConfig, их нельзя переопределить с помощью переменных среды.
Минимальный файл конфигурации экспортирует функцию defineAppConfig, которая содержит объект с вашей конфигурацией. Функция defineNuxtConfig доступна глобально без импорта.
export default defineAppConfig({
title: 'Привет Nuxt',
theme: {
dark: true,
colors: {
primary: '#ff0000'
}
}
})
Эти переменные станут доступны для всего остального приложения с помощью композабла useAppConfig.
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
runtimeConfig против app.config
Как указано выше, runtimeConfig и app.config используются для предоставления переменных остальной части вашего приложения. Вот некоторые рекомендации, чтобы определить, следует ли вам использовать одно или другое:
runtimeConfig: Приватные или публичные токены, которые необходимо указать после сборки с использованием переменных окружения.app.config: Публичные токены, которые определяются во время сборки, конфигурация веб-сайта - например, тема, заголовок и любая конфигурация проекта, которая не является конфиденциальной.
| Feature | runtimeConfig | app.config |
|---|---|---|
| Сторона клиента | Гидратация | Вместе со сборкой |
| Переменные среды | ✅ Да | ❌ Нет |
| Реактивность | ✅ Да | ✅ Да |
| Поддержка типов | ✅ Частично | ✅ Да |
| Конфигурация по запросу | ❌ Нет | ✅ Да |
| Горячая замена модулей (HMR) | ❌ Нет | ✅ Да |
| Непримитивные типы JS | ❌ Нет | ✅ Да |
Внешние конфигурационные файлы
Nuxt использует файл nuxt.config.ts как единственный источник истины и пропускает чтение внешних файлов конфигурации. В процессе создания вашего проекта вам может потребоваться настроить их. В следующей таблице представлены общие конфигурации и, где это применимо, как их можно настроить с помощью Nuxt.
| Имя | Файл конфигурации | Как настроить |
|---|---|---|
| Nitro | nitro.config.ts | Используйте ключ nitro в nuxt.config |
| PostCSS | postcss.config.js | Используйте ключ postcss в nuxt.config |
| Vite | vite.config.ts | Используйте ключ vite в nuxt.config |
| webpack | webpack.config.ts | Используйте ключ webpack в nuxt.config |
Вот список других распространенных конфигурационных файлов:
| Имя | Файл конфигурации | Как настроить |
|---|---|---|
| TypeScript | tsconfig.json | Больше информации |
| ESLint | eslint.config.js | Больше информации |
| Prettier | .prettierrc.json | Больше информации |
| Stylelint | .stylelintrc.json | Больше информации |
| TailwindCSS | tailwind.config.js | Больше информации |
| Vitest | vitest.config.ts | Больше информации |
Конфигурация Vue
С Vite
Если вам нужно передать опции в @vitejs/plugin-vue или @vitejs/plugin-vue-jsx, вы можете это сделать в файле nuxt.config.
vite.vueдля@vitejs/plugin-vue. Проверьте доступные опции здесь.vite.vueJsxдля@vitejs/plugin-vue-jsx. Проверьте доступные опции здесь.
export default defineNuxtConfig({
vite: {
vue: {
customElement: true
},
vueJsx: {
mergeProps: true
}
}
})
С webpack
Если вы используете webpack и вам нужно настроить vue-loader, вы можете использовать ключ webpack.loaders.vue внутри файлаnuxt.config. Доступные опции указаны здесь.
export default defineNuxtConfig({
webpack: {
loaders: {
vue: {
hotReload: true,
}
}
}
})
Включить экспериментальные функции Vue
Вам может потребоваться включить экспериментальные функции во Vue, такие как propsDestructure. Nuxt предоставляет легкий путь сделать это в nuxt.config.ts, вне зависимости от того, какой сборщик вы используете:
export default defineNuxtConfig({
vue: {
propsDestructure: true
}
})
Экспериментальная reactivityTransform миграция с Vue 3.4 и Nuxt 3.9
С Nuxt 3.9 и Vue 3.4, reactivityTransform был перемещен из Vue в Vue Macros, который имеет Интеграцию с Nuxt.