Папка ассетов в Vite

Папка ассетов собирает картинки и стили в отдельный каталог внутри dist.

По умолчанию Vite складывает скопированные ресурсы в dist/assets. Своё имя удобно, когда на сервере уже занято слово assets или нужна другая структура каталогов. Поле build.assetsDir меняет только подпапку относительно dist, сам index.html остаётся в корне вывода.

Укажем каталог media в конфиге:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsDir: 'media',
  },
})

Подключим svg через импорт в модуле:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 24">
  <text x="4" y="18" font-size="14">hello</text>
</svg>

Модуль вставит картинку на страницу и выведет текст hello:

import iconUrl from './icon.svg'

const img = document.createElement('img')
img.src = iconUrl
img.alt = 'hello'
document.body.append(img)
document.querySelector('#app').textContent = 'hello'

Выполним сборку:

npm run build

В dist появится папка media, а не assets. Файл svg с хешем в имени лежит внутри media. В index.html адрес картинки ведёт в этот каталог.

Сложите картинки в каталог static внутри dist, импортируйте src/badge.svg из src/main.js, соберите проект со словом hello и найдите svg в dist/static.

Смените каталог на files, пересоберите проект и убедитесь, что картинка больше не попадает в dist/static, а лежит в dist/files.