Папка public в Vite

Папка public копируется как есть, адрес файла начинается со слэша и не проходит через импорт.

Некоторые файлы должны лежать в корне опубликованного сайта с неизменным именем - например, простая иконка для закладки или статичный рисунок по фиксированному URL. Для этого в корне проекта заводят папку public. Всё внутри неё при сборке попадает в dist с тем же относительным путём, без хеша в имени и без строки import в JavaScript. Создадим рисунок:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 32">
  <text x="6" y="22" font-size="17">hello</text>
</svg>

На странице укажем адрес со слэша в начале - так браузер запросит файл от корня сервера:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
  </head>
  <body>
    <img src="/mark.svg" alt="mark" />
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Текст hello оставим в модуле:

document.body.append(document.createTextNode('hello'));

На http://localhost:5173 картинка откроется по адресу /mark.svg. После npm с подкомандой run и именем build файл окажется в dist/mark.svg с тем же именем. Путь /mark.svg в разметке менять не нужно.

Положите public/crest.svg и выведите его через img с src="/crest.svg" в index.html, а слово hello добавьте из src/main.js.

Выполните сборку и убедитесь, что dist/crest.svg существует и совпадает по содержимому с public/crest.svg.