Введение в страницы в Vite

Несколько страниц живут в одном проекте, и у каждой свой html.

Главная по-прежнему начинается с index.html и модуля src/main.js. Вторая и следующие страницы лежат рядом в корне проекта или в подпапке, но для Vite каждая остаётся отдельной точкой входа. У каждой свой тег script с type="module" и свой JavaScript-файл, который стартует первым на этой вкладке.

На сервере разработки страница открывается по адресу, который совпадает с путём к файлу от корня сайта. index.html обычно видна по основному адресу с портом 5173, а соседний html откроется по своему имени в том же проекте. Команда npm с подкомандой run и именем dev подхватывает все такие файлы без отдельного сервера на каждую страницу.

Чтобы сборка знала обо всех страницах, их перечисляют в файле vite.config.js. Список точек входа задают полем input в корне объекта, который возвращает defineConfig. Тогда команда npm с подкомандой run и именем build положит в dist не один html, а столько, сколько указано в настройке. Структура путей в папке результата повторяет расположение исходных страниц относительно корня проекта.

Так собирают небольшой сайт из нескольких экранов без фреймворка и без отдельного шаблонизатора: у каждой страницы свой html и свой стартовый модуль, а общие правила и данные при необходимости выносят в отдельные файлы внутри src.