Базовый путь в Vite

Базовый путь задаёт префикс адресов, когда сайт открывают не из корня домена.

На хостинге проект часто лежит не по адресу https://example.com/, а в подпапке, например /site/. Без префикса браузер ищет скрипты в корне домена и получает ошибку 404. Поле base в корне объекта настройки добавляет этот префикс ко всем итоговым адресам сборки.

Запишем значение /site/ в файле настройки:

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/site/',
})

Модуль по-прежнему выводит текст на странице:

document.querySelector('#app').textContent = 'hello'

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

npm run build

Откроем dist/index.html в редакторе. Атрибут src у тега script и адреса стилей начинаются с /site/, далее идёт каталог ассетов и имя файла с хешем. Такой html можно выложить в подпапку site на сервере, и браузер запросит скрипты по правильным путям.

Соберите проект со словом hello так, чтобы адреса в итоговом html начинались с /app/, и найдите этот префикс у тега script в dist/index.html.

Смените префикс на /docs/, пересоберите проект и убедитесь, что в итоговом html все пути к ассетам начинаются с /docs/, а не со старого префикса.