Перейти на PRO

Что делать с кодом после написания приложения и создания статики через npm build на Vue

Тип вопроса: CI/CD Вероятность: 10% Категория: Frontend Разработчик

Ответ

После npm run build в Vue создаётся папка dist с оптимизированной статикой. Вот что делать дальше:

  1. Деплой – загрузи dist на хостинг (Netlify, Vercel, GitHub Pages) или сервер через FTP/SFTP.
    Пример для GitHub Pages:
    npm install -g gh-pages
    gh-pages -d dist
  1. Настройка сервера – если используется Nginx/Apache, убедись, что роутинг работает в history-режиме (если он включён в Vue Router). Для Nginx:
    location / {
      try_files $uri $uri/ /index.html;
    }

  1. CDN – залей ассеты (JS/CSS) на CDN для ускорения загрузки.

  2. Мониторинг – подключи Sentry/Google Analytics для отслеживания ошибок и метрик.

  3. Кэширование – настрой заголовки Cache-Control для статики (например, immutable для хэшированных файлов).

Проверь, что index.html не кэшируется, а остальные файлы – да.

Ответ 18+ 🔞

А, ну вот, накодил, накодил, красоту наворотил, npm run build нажал — и вылезла эта папка dist, как сука гриб после дождя. Всё сжато, оптимизировано, красиво. А дальше-то что, блядь? А дальше начинается самое интересное, ёпта!

Первое дело — выложить это всё на показ. Ты эту папку dist куда-нибудь засунь, чтобы люди увидели. На хостинг какой, блядь. На Netlify, Vercel, GitHub Pages — куда душа ляжет. На GitHub Pages, например, вообще элементарно:

npm install -g gh-pages
gh-pages -d dist

И всё, пиздец, твой сайт уже в сети, можно ссылкой хвастаться. Красота, да?

А вот если ты, сука, свой сервер имеешь, Nginx там или Apache, то тут уже подвох может быть. Если в твоём Vue Router этот самый history-режим включён (а он обычно включён, чтоб урлы красивые были без решёток), то сервер надо научить уму-разуму. А то он на любой роут, кроме главной, тебе 404 выдаст, как последний мудак. Для Nginx, например, в конфиг вот эту магию добавить надо:

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

Теперь сервер, если файл не нашёл, не орёт, а тихонечко отдаёт index.html, а Vue Router уже сам разберётся, что показывать. Умно, блядь!

Дальше — скорость. Картинки, скрипты, стили — это всё можно на CDN закинуть. Пусть летают к пользователям с ближайшего сервера, как угорелые. Загрузка ускорится — все довольны.

Ну и, конечно, слежка. Без слежки сейчас никуда, ёпта. Подключи какую-нибудь Sentry, чтобы она тебе кричала, если у пользователя что-то сломалось. Или Google Analytics, чтобы считать, сколько этих пользователей вообще приползло. А то сидишь как дурак и не знаешь, работает ли твоё творение.

И последний штрих — кэширование, блядь. Это важно, как дважды два. Настрой заголовки Cache-Control на сервере так:

  • Сам index.html — НЕ КЭШИРОВАТЬ вообще, чтоб он всегда свежий брался. А то обновишь сайт, а у людей старая версия висеть будет.
  • А всё остальное — JS, CSS, картинки — особенно те, у которых в названии хэш (типа main.abc123.js), — кэшируй навечно (immutable). Они же не меняются, зачем их каждый раз качать?

Вот и весь сказ, блядь. Сделал, выложил, настроил — и сиди, пей чай, пока сайт работает. Главное — не забудь проверить, что всё действительно работает, а не просто "ой, вроде задеплоилось".

© ХакСобесов, 2026
support@hacksobesov.com