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

Во время разработки файлы .vue на лету обрабатывает сервер Vite. Для публикации проект собирают: Vite превращает компоненты в обычные файлы HTML, CSS и JavaScript, сжимает их и складывает в папку dist/. Эту папку можно выложить на любой хостинг статических файлов.

Сборка

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

npm run build

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

dist/
├── index.html
├── favicon.ico
└── assets/
    ├── index-BkX3c9aQ.js
    ├── index-D1f8Lw2e.css
    └── AdminLayout-Cq7nR0sd.js

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

Проверка сборки

npm run preview

Команда запускает простой сервер для папки dist/ по адресу http://localhost:4173. Пройдите по страницам блога: так вы проверите именно то, что окажется на сервере.

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

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

VITE_API_URL=https://jsonplaceholder.typicode.com

// src/stores/posts.js
const API = `${import.meta.env.VITE_API_URL}/posts`

Для сборки можно создать отдельный файл .env.production — Vite возьмёт его при npm run build. Значения подставляются в код при сборке, поэтому не храните в таких переменных секретные ключи: любой посетитель увидит их в файлах JavaScript.

Базовый адрес

Если сайт будет открываться не из корня домена, а, например, по адресу https://example.com/blog/, укажите это в vite.config.js:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  plugins: [vue()],
  base: '/blog/',
})

Vite допишет /blog/ ко всем путям файлов, а роутер получит этот адрес через import.meta.env.BASE_URL — он уже передан в createWebHistory.

Настройка сервера

Роутер в режиме createWebHistory использует обычные адреса вида /posts/5, но такого файла на сервере нет. Сервер должен на любой неизвестный адрес отдавать index.html, а дальше страницу выберет роутер. Для nginx это одна строка в блоке location:

location / {
    try_files $uri $uri/ /index.html;
}

Хостинги статических сайтов — Netlify, Vercel, Cloudflare Pages — для проектов Vite обычно предлагают такое правило в настройках или определяют его сами.

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

Выложить сайт, открыть главную — всё работает, а обновить страницу /posts/5 — ошибка 404. Сервер ищет файл posts/5 и не находит его, потому что маршруты существуют только в JavaScript. Настройте возврат index.html для всех адресов, как в разделе выше, и проверьте, обновив вложенную страницу после публикации.