Вторая страница в Vite

Вторая страница задаётся полем input рядом с первой, и сервер открывает обе.

Пусть главная по-прежнему выводит слово hello из src/main.js, а рядом появится about.html со своим модулем. Файл настройки уже лежит в корне проекта и экспортирует объект через defineConfig. Добавим поле input на верхнем уровне объекта, не внутри build:

import { defineConfig } from 'vite'

export default defineConfig({
  input: {
    main: 'index.html',
    about: 'about.html',
  },
})

Ключи main и about служат короткими именами точек входа для сборки. Значения - пути к html от корня проекта. Разметка второй страницы устроена так же, как у главной, но скрипт ведёт на другой модуль:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>about</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/about.js"></script>
  </body>
</html>

Модуль второй страницы тоже выведет слово hello, чтобы было видно, что загрузилась именно эта точка входа:

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

Запустим сервер разработки командой npm с подкомандой run и именем dev, если он ещё не работает. Откроем http://localhost:5173 и увидим главную со словом hello. Затем откроем http://localhost:5173/about.html: на экране снова будет hello, но в сети браузера первым модулем пойдёт about.js, а не main.js. Выполним сборку с именем build в той же команде npm с подкомандой run и проверим, что в dist лежат оба html.

Добавьте info.html с модулем src/info.js, который выводит слово ready, и включите эту страницу в поле input рядом с index.html.

Запустите сервер разработки и откройте главную и info.html по разным адресам; на второй вкладке должно быть слово ready.