Сборка и публикация

Сервер разработки npm run dev нужен только вам. Чтобы приложение увидели другие, его собирают: Vite превращает JSX в обычный JavaScript, объединяет и сжимает файлы и кладёт результат в папку dist/. Это статические файлы — HTML, CSS, JavaScript и картинки, — которые можно выложить на любой хостинг без Node.js на сервере.

Сборка

В папке проекта блога выполните:

npm run build

В терминале появится список файлов с размерами, а в проекте — папка dist/:

dist/
├── assets/
│   ├── index-B7xQ2kLm.js
│   └── index-Dk3fA9pZ.css
├── index.html
└── vite.svg

Странные части имён — отпечатки содержимого. Если файл изменится, изменится и имя, и браузеры не покажут старую версию из кэша.

Проверка перед публикацией

Собранный сайт можно открыть локально:

npm run preview

Откройте http://localhost:4173 — это именно то, что увидят пользователи. Пройдите по страницам и убедитесь, что всё работает.

Переменные окружения

Адрес API удобно не зашивать в код, а задавать в файле .env в корне проекта:

VITE_API_URL=https://jsonplaceholder.typicode.com

В коде значение читают через import.meta.env:

// src/components/PostList.jsx
const url = `${import.meta.env.VITE_API_URL}/posts`;

В код попадают только переменные с приставкой VITE_. Для сборки можно завести отдельный файл .env.production. Значения подставляются при сборке и видны любому, кто откроет код страницы, поэтому секретные ключи сюда класть нельзя.

Публикация

Хостинг	Как опубликовать
Netlify, Vercel	Подключить репозиторий: команда сборки `npm run build`, папка `dist`
GitHub Pages	Выложить содержимое `dist/`, в `vite.config.js` указать `base: '/имя-репозитория/'`
Обычный веб-сервер	Скопировать содержимое `dist/` в папку сайта

Сервисы вроде Netlify и Vercel сами запускают сборку при каждом обновлении репозитория.

Маршруты на хостинге

Пока вы ходите по ссылкам, адреса меняет React Router. Но если обновить страницу /posts/7, браузер запросит у сервера файл по этому адресу, а его нет. Сервер нужно настроить так, чтобы на любой неизвестный адрес он отдавал index.html. На Netlify для этого создают файл public/_redirects со строкой:

/*  /index.html  200

У других хостингов похожая настройка называется rewrite или fallback для SPA.

Частая ошибка

Если открыть dist/index.html двойным щелчком, страница будет пустой: браузер загружает файлы по адресу file://, и пути к скриптам не работают. Собранный сайт всегда открывают через веб-сервер — локально командой npm run preview.

Спасибо, что читаете!