174 подписчика

Как создать многостраничный сайт используя Vite?

Vite - это инструмент сборки, созданный для обеспечения быстрого процесса разработки современных веб-проектов. Вы должно быть уже заметили что в проекте Vite, файл index.html является основным, так как во время разработки index.html - это точка входа (entry point) в ваше приложение. Получается, сборщик заточен на SPA или одностраничные приложения.

Что делать, если нужно создать обыкновенный многостраничный сайт? Можем просто добавить нужные страницы в корень, такое решение будет работать, но только в режиме разработки. Но при сборке получаем только один файл index.html в папке dist. Здесь нет готовых решений из коробки. Придется немного почитать доку и ручками отредактировать файл vite.config.js.

Для настройки нам понадобится список всех страниц нашего проекта в виде объекта:

const pages = {

index: resolve(__dirname, "index.html"),

about: resolve(__dirname, "about.html"),

team: resolve(__dirname, "team.html"),

};

Передаем объект pages в build.rollupOptions и собираем проект еще раз.

rollupOptions: {

input: {

...pages,

Теперь все страницы попали в папку для сборки dist.

Видео: YouTube | Дзен