Ассеты
Nuxt использует две директории для обработки таких ассетов, как: таблицы стилей, шрифты и изображения.
- Директория
public/содержит контент, который предоставляется в корне сервера "как есть". - Директория
assets/содержит по умолчанию все ассеты, которые должен обрабатывать сборщик (Vite или webpack).
Директория Public
Директория public/ используется как публичный сервер для статических ресурсов, доступных по определенному URL-адресу приложения.
Вы можете получить файл в директории public/ из кода приложения или из браузера по корневому URL /.
Пример
Например, ссылка на файл изображения из директории public/img/, доступна по статическому URL /img/nuxt.png:
<template>
<img src="/img/nuxt.png" alt="Откройте для себя Nuxt 3" />
</template>
Директория Assets
Nuxt использует Vite (по умолчанию) или webpack для сборки и упаковки приложения. Основная функция этих инструментов сборки - обработка файлов JavaScript, но они могут быть расширены с помощью плагинов (для Vite) или загрузчиков (для webpack) для обработки других видов ресурсов, таких как таблицы стилей, шрифты или SVG. На этом этапе исходный файл преобразуется (в основном) для повышения производительности или кэширования (например, для минимизации таблиц стилей или инвалидации кэша браузера).
По соглашению, Nuxt использует директорию assets/ для хранения этих файлов, но для этого каталога нет функции автоматического сканирования, и вы можете использовать для него любое другое имя.
В коде приложения вы можете ссылаться на файл, расположенный в директории assets/ используя путь ~/assets/.
Пример
Например, ссылка на файл изображения, который будет обработан, если инструмент сборки настроен на обработку файла с таким расширением:
<template>
<img src="~/assets/img/nuxt.png" alt="Откройте для себя Nuxt 3" />
</template>
assets/ по статическому URL наподобие /assets/my-file.png. Если вам нужен статический URL, используйте директорию public/.Глобальные импорты стилей
Чтобы глобально добавлять выражения в стили компонентов Nuxt, вы можете использовать опцию Vite в файле nuxt.config.
Пример
В этом примере, есть файл sass partial, содержащий переменные с цветами, которые будут использованы страницами и компонентами Nuxt.
$primary: #49240F;
$secondary: #E4A79D;
В файле nuxt.config
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "~/assets/_colors.scss" as *;'
}
}
}
}
})