Введение в файлы в Vite

Файлы картинок и данных Vite подставляет в страницу по импорту либо копирует из папки public.

Страница по-прежнему строится вокруг index.html и модуля src/main.js. Текст и логику по-прежнему пишут в JavaScript, стили подключают импортом CSS, а картинки и JSON добавляют отдельными файлами рядом с кодом. Сервер разработки и команда сборки понимают такие файлы и подставляют правильные адреса, чтобы браузер их загрузил.

Картинку можно взять в модуль импортом: выражение вернёт строку с адресом, который подойдёт для атрибута src или для свойства в стилях. Тот же файл можно указать относительным путём в CSS или прямо в разметке страницы - Vite найдёт его при сборке и положит в папку результата с хешем в имени, если нужно. В примерах учебника используют текстовые файлы svg, их удобно править в редакторе и не хранить как двоичные архивы.

Папка public устроена иначе. Её содержимое копируют в корень сборки без прохода через граф модулей. Адрес такого файла начинается со слэша от корня сайта, и импорт JavaScript для него не требуется. Данные в формате JSON импортируют как обычный модуль: поля объекта читают так же, как свойства любого другого импорта.

На сервере разработки адреса часто выглядят проще, чем в папке dist после команды сборки. Имеет смысл проверять и режим npm с подкомандой run и именем dev, и сборку с именем build, если картинка или JSON должны попасть на хостинг без сюрпризов в путях.