Развёртывание на хостинговых платформах
Развёртывайте приложения Vue на статических хостингах и платформах
«Развёртывание на хостинговых платформах» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Публикация приложения
SPA на Vue собирается в статические файлы, поэтому его можно разместить на любом статическом хостинге. Платформы вроде Netlify, Vercel и GitHub Pages позволяют быстро и часто бесплатно развёртывать такие файлы.
Что вы развёртываете
Вы развёртываете содержимое папки dist, созданной командой npm run build. Хостинг раздаёт эти файлы пользователям по всему миру через CDN.
npm run build
# upload the dist/ folder to your hostРазвёртывание на Netlify
Netlify может выполнять сборку из вашего репозитория Git. Укажите ему команду сборки и папку для публикации.
# Netlify settings
# Build command: npm run build
# Publish directory: distРазвёртывание на Vercel
Vercel автоматически распознаёт проекты Vite. Подключите свой репозиторий: платформа выполнит сборку, раздаст результат и будет повторять развёртывание после каждого отправленного изменения.
# Vercel auto-detects:
# Build command: npm run build
# Output directory: distРазвёртывание на GitHub Pages
GitHub Pages раздаёт статические файлы из репозитория. Выполните сборку локально или в среде непрерывной интеграции, затем отправьте результат dist в ветку Pages или используйте действие.
Проблема режима истории
Vue Router в режиме истории создаёт аккуратные URL, например /about. Но на статическом хостинге нет настоящего файла /about, поэтому прямой переход или обновление страницы возвращает ошибку 404.
Исправление с перенаправлением SPA
Решение — указать серверу отдавать index.html для всех маршрутов, чтобы Vue Router обрабатывал маршрутизацию на стороне клиента.
Правило перенаправления Netlify
В Netlify добавьте файл _redirects или правило netlify.toml, которое переписывает все пути на index.html.
# public/_redirects
/* /index.html 200Правило переписывания Vercel
В Vercel переписывание в vercel.json обеспечивает такое же перенаправление на index.html.
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}Настройка базового пути
Если ваше приложение раздаётся из подпути (что часто бывает на GitHub Pages, например /my-repo/), задайте параметр base в конфигурации Vite, чтобы URL ресурсов разрешались правильно.
// vite.config.js
export default {
base: "/my-repo/"
}Развёртывание через непрерывную интеграцию
Автоматизируйте развёртывание с помощью непрерывной интеграции. Рабочий процесс устанавливает зависимости, запускает тесты, выполняет сборку и публикует результат после каждого отправленного изменения в основную ветку, поэтому публикация не требует ручных действий.
# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/Быстрая проверка
Проверьте свои знания о развёртывании.
Итоги
Разверните папку dist на статическом хостинге вроде Netlify, Vercel или GitHub Pages. Добавьте резервный маршрут SPA (перенаправление или переписывание на index.html), чтобы маршруты в режиме истории работали после обновления страницы, задайте Vite-параметр base для хостинга в подпути и автоматизируйте всё с помощью непрерывной интеграции. Далее вы настроите мониторинг и обслуживание приложения в рабочей среде.
Часто задаваемые вопросы
Урок «Развёртывание на хостинговых платформах» бесплатный?
Да — полный текст урока «Развёртывание на хостинговых платформах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Развёртывание на хостинговых платформах»?
Развёртывайте приложения Vue на статических хостингах и платформах Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Развёртывание на хостинговых платформах»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Оптимизация процесса сборки
- Развёртывание на хостинговых платформах
- Мониторинг и обслуживание