Статичные ресурсы

---

Nuxt использует два каталога для обработки таких ресурсов, как таблицы стилей, шрифты или изображения.

• Содержимое папки public/ хранится на корневом сервере как есть.
• Каталог app/assets/ содержит все ресурсы, которые вы хотите обработать с помощью инструмента сборки (Vite или webpack).

Каталог public

Каталог public/ используется в качестве публичного сервера для статических ресурсов, общедоступных по определенному URL-адресу вашего приложения.

Вы можете получить файл в public/ из кода вашего приложения или из браузера по корневому URL-адресу /.

Пример

Например, ссылка на файл изображения в public/img/, доступном по статическому URL-адресу /img/nuxt.png:

<!-- app/app.vue -->

<template>
  <img
    src="/img/nuxt.png"
    alt="Откройте для себя Nuxt"
  >
</template>

 

Каталог assets

Nuxt использует Vite (по умолчанию) или webpack для создания и комплектации вашего приложения. Основной функцией этих инструментов сборки является обработка файлов JavaScript, но они могут быть расширены с помощью плагинов (для Vite) или загрузчиков (для webpack) для обработки других видов ресурсов, таких как таблицы стилей, шрифты или SVG. Этот шаг преобразует исходный файл, главным образом, в целях повышения производительности или кэширования (например, для уменьшения таблицы стилей или аннулирования кэша браузера).

По общему правилу, Nuxt использует каталог app/assets/ для хранения этих файлов, но для этого каталога нет функции автоматического сканирования, и вы можете использовать для него любое другое имя.

В коде вашего приложения вы можете ссылаться на файл, расположенный в каталоге app/assets/, используя путь ~/assets/.

Пример

Например, ссылка на файл изображения, который будет обработан, если инструмент сборки настроен на обработку этого расширения файла:

<!-- app/app.vue -->

<template>
  <img
    src="~/assets/img/nuxt.png"
    alt="Откройте для себя Nuxt"
  >
</template>