Создание и работа с дистрибутивом build dist Vue приложений

Введение

Когда проект на Vue готов к публикации, его нужно превратить в дистрибутив — оптимизированный набор файлов, который можно выложить на сервер или раздать пользователям. Для этого Vue CLI и современные сборщики (например, Vite) предоставляют инструменты, превращающие ваш исходный код и зависимости в компактные готовые пакеты. Процесс включает сборку, оптимизацию ресурсов и помещение готовых файлов в папку, которую обычно называют dist или build. Давайте подробно рассмотрим, как собрать и использовать дистрибутив Vue приложения, какие шаги и настройки важны, какие файлы получаются на выходе и в чем особенности развертывания готового продукта.

Как работает процесс сборки Vue приложения

Сборка Vue приложения — это процесс превращения исходного кода (написанного на JavaScript, TypeScript, SCSS, Sass и других языках) и пакетов npm в минифицированный, оптимизированный код, пригодный для запуска в браузере.

Большинство проектов Vue используют либо Vue CLI, либо Vite. Оба инструмента упрощают этапы сборки:

1. Подготавливают код — транспилируют и компилируют файлы .vue, JS, CSS, изображения.
2. Минифицируют — сокращают размер файлов, удаляют комментарии, объединяют файлы.
3. Разделяют — разбивают приложение на чанки для более быстрой загрузки.
4. Собирают — помещают финальные версии файлов в папку dist (или build).
5. Готовят к деплою — код и ассеты можно раздать через CDN, загрузить на сервер, хостинг, в контейнер и т. д.

Рассмотрим пошаговый путь: от команды сборки до деплоя.

Структура итогового дистрибутива dist

Когда выполнен процесс сборки, в каталоге проекта появляется папка (по умолчанию dist). Обычно ее структура такова:

• index.html — главный HTML-файл страниц приложения
• assets/ — папка с JS, CSS, картинками и шрифтами
• manifest.json, robots.txt (если есть) — опциональные файлы для SEO, PWA
• дополнительные статические файлы (favicon, конфиг и пр.)

Пример:

dist/
  index.html
  assets/
    logo.a1b2c3.svg
    app.34fce9.js
    vendor.123abc.js
    style.2387a2.css

Теперь расскажу, как появление этих файлов организовано и как получить такой дистрибутив.

Использование Vue CLI для сборки

Vue CLI — это графический и командный инструмент, который задает структуру проекта и управляет сборкой через Webpack. Вы делаете проект через vue create, а затем управляете им с помощью команд.

Настройка и запуск сборки

В корне проекта на Vue CLI вы найдете файл package.json, где описаны команды.

Стандартная команда для сборки production-версии:

npm run build

или yarn build

Эта команда вызывает скрипт из package.json:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  ...
}

vue-cli-service build запускает сборку:

• компилирует .vue файлы в JS
• собирает CSS из компонентов
• минифицирует скрипты и стили
• кладет все в папку dist

Кастомизация процесса сборки

Настроить процесс можно через файл vue.config.js (в корне). Вот пример с изменением имени папки дистрибутива и базового пути для ассетов:

// vue.config.js
module.exports = {
  outputDir: 'build_dist', // имя папки с дистрибутивом
  publicPath: '/static/', // относительный путь, с которого загружаются главные ресурсы
  productionSourceMap: false, // отключает source map для production
}

Комментарии поясняют каждую опцию. Например, если ваш сайт будет размещен не в корне домена, указывайте соответствующий publicPath.

Дополнительные параметры сборки

Vue CLI позволяет настроить:

• разделение кода на чанки для lazy loading (отложенной загрузки)
• интеграцию с PWA (Progressive Web App)
• работу с переменными окружения (.env файлы)

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

Создайте .env.production файл:

VUE_APP_API_URL=https://api.yoursite.com

Используйте переменную в коде:

// Получаем URL API из переменных окружения
axios.get(process.env.VUE_APP_API_URL + '/products')

Vue CLI автоматически подставит это значение при сборке production.

Использование Vite для сборки Vue приложений

Vite — современный быстрый сборщик, постепенно становится новым стандартом для проектов Vue 3+. Конфигурация и сборка похожи, хотя Vite проще по устройству.

Инициализация и настройка

Стартовый шаблон для Vite:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

Основной файл для настройки — vite.config.js или vite.config.ts.

Выполнение сборки

Выполните команду:

npm run build

или yarn build

В скриптах прописано:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  ...
}

Появляется папка dist, куда кладутся все итоговые файлы (см. пример структуры выше).

Конфигурация Vite

Чтобы изменить базовый путь, используйте опцию base:

// vite.config.js
export default {
  base: '/production/subpath/', // пример для размещения не в корне
}

Vite создает более "чистую" структуру — например, все ассеты лежат вместе, дополнительные HTML можно добавить в папку public.

Разделение кода и оптимизация

Vite по умолчанию разделяет ваш код на чанки (chunks), что ускоряет загрузку крупного приложения. Оптимизацию можно настроить глубже через build.rollupOptions в конфиге, но базовые задачи обычно решаются "из коробки".

Файлы в папке dist — что с ними делать

В папке dist или аналогичной (если переименовывали) находятся файлы, полностью готовые к раздаче браузеру.

Обычно в составе дистрибутива:

• один или несколько .js файлов (основной код приложения, библиотеки)
• стили .css
• изображения, шрифты, медиафайлы
• index.html, который ссылается на минифицированные скрипты и стили

Обратите внимание: многие сборщики внедряют hash в имена файлов (например, app.a1b2c3.js). Это позволяет эффективно кешировать ресурсы — если файл изменился, браузер скачает новый вариант.

Как работает index.html

Файл index.html содержит ссылки примерно такого вида:

<link rel="stylesheet" href="/assets/style.2387a2.css">
<script type="module" src="/assets/app.34fce9.js"></script>

Все пути подставляются автоматически на основе настроек сборщика.

Размещение готового дистрибутива на сервере

Когда дистрибутив готов, задача сводится к следующему:

• скопировать все содержимое папки dist на сервер (FTP, rsync, git, CI/CD-пайплайн и т.д.)
• настроить ваш веб-сервер на раздачу этих файлов (наиболее популярные — Nginx, Apache, служебные static-серверы)

Процесс деплоя

Пример деплоя на обычный VPS с Nginx

1. Собираете проект: npm run build

2. Загружаете содержимое папки dist на сервер в нужную директорию, например /var/www/myapp/.

3. Настраиваете Nginx так, чтобы / раздавал файлы из этой папки, а любые несуществующие пути отправляли на index.html (для SPA):

server {
  listen 80;
  server_name mysite.ru;

  root /var/www/myapp/dist;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

4. Перезапускаете Nginx для применения настроек.

Деплой на Github Pages или Vercel

• Для Github Pages используйте пакет gh-pages и команду gh-pages -d dist.
• Для бесплатного деплоя на Vercel или Netlify — укажите папку dist как output directory в настройках.

Что важно при деплое SPA

SPA (Single Page Application) приложения требуют, чтобы все несуществующие роуты возвращали index.html, иначе роутинг внутри приложения не будет работать. Это касается и Nginx, и других статических серверов.

Тонкая настройка production сборки

Source Maps — карты кода

По умолчанию, Vue CLI генерирует sourcemaps для продакшн. Это полезно для отладки, но может раскрывать структуру вашего кода. Если не требуется — отключите через конфиг:

// vue.config.js
module.exports = {
  productionSourceMap: false
}

Для Vite аналогично:

// vite.config.js
export default {
  build: {
    sourcemap: false,
  }
}

Минификация и очистка

Vue CLI и Vite по умолчанию минифицируют JS/CSS. Можно добавить postcss-плагины или ручную очистку через специальные плагины, если нужны дополнительные шаги.

Сжатие изображений

Для крупных проектов полезно добавить оптимизацию изображений:

• используйте плагины вроде vite-plugin-imagemin
• или оптимизируйте изображения руками до сборки

Анализ итогового бандла

Следите за размерами выходных файлов — это влияет на скорость загрузки. Добавьте анализатор размеров бандла, чтобы узнать, какие файлы "тяжелее":

• Для Vue CLI: пакет webpack-bundle-analyzer
• Для Vite: пакет rollup-plugin-visualizer

Пример для Vue CLI:

npm install --save-dev webpack-bundle-analyzer
vue-cli-service build --report

Пример для Vite:

npm install --save-dev rollup-plugin-visualizer

И настройте плагин в vite.config.js.

Как добавить сторонние ассеты и файлы

Папка public

В обоих сборщиках есть папка public. Все содержимое этой папки копируется "как есть" в итоговую папку dist (без обработки). Используйте ее для:

• favicon
• robots.txt
• статичных картинок, PDF и др.

Пример:

• Поместите logo.png в папку public
• После сборки файл появится в dist/logo.png и будет доступен по такому пути

Использование внешних библиотек через CDN

Хотите уменьшить размер итогового JS-файла? Выносите тяжелые зависимости в CDN и подключайте их напрямую в index.html:

<script src="https://cdn.jsdelivr.net/npm/vue@3.3.0/dist/vue.global.prod.js"></script>

А в конфиге сборки настройте externals, чтобы не включать библиотеку Vue в свой бандл.

Миграция между сборщиками: CLI ↔ Vite

Для проектов на Vue 2 обычно используется CLI, для Vue 3 чаще выбирают Vite. Если хотите перейти с одного на другой:

• Рассмотрите, есть ли специфичные плагины только для CLI или Vite
• Проверьте корректность работы путей, импорта ассетов и переменных окружения
• Изучите, все ли зависимости поддерживают выбранный сборщик

Переход даст преимущество в скорости разработки и размерах сборки, хотя иногда требует небольшого рефакторинга кода (например, для динамического импорта).

Работа с dist в CI/CD

Для автоматизации сборки и выкладки используйте CI/CD — настройте автоматическое выполнение npm run build и загрузку папки dist на сервер или хостинг. Например, в пайплайне GitHub Actions:

steps:
  - uses: actions/checkout@v2
  - name: Установка зависимостей
    run: npm install
  - name: Сборка
    run: npm run build
  - name: Деплой на сервер
    run: rsync -avz ./dist/ user@host:/path/to/site/

Это обеспечит быстрое обновление вашего сайта при каждой отправке изменений.

Заключение

Сборка и работа с дистрибутивом Vue — несложная, но важная часть жизненного цикла любого современного фронтенда. Используйте CLI или Vite в зависимости от задач и версии Vue, аккуратно настраивайте параметры сборки, безопасно храните переменные окружения, оптимизируйте статические ресурсы. Готовый дистрибутив удобно разместить практически на любом сервере, статическом хостинге или CDN. Автоматизация через CI/CD ускоряет процесс и снижает вероятность ошибок.

Частозадаваемые технические вопросы по теме

Как изменить базовый путь (base URL) приложения при сборке для поддомена или каталога?

Ответ:
Для Vue CLI укажите в vue.config.js: js module.exports = { publicPath: '/my-app/' } Для Vite — в vite.config.js: js export default { base: '/my-app/' } Это важно, если вы размещаете приложение не на корне сайта.

Как подключить сервис-воркеры и превратить приложение в PWA?

Ответ:
Для Vue CLI используйте плагин PWA: vue add pwa Это добавит все необходимые настройки. Для Vite ищите плагин например vite-plugin-pwa.

В dist не появляется favicon что делать?

Ответ:
Положите favicon.ico в папку public проекта. При сборке файл появится в dist. Аналогично добавляйте robots.txt и manifest.json.

Как убрать source map из production сборки?

Ответ:
В vue.config.js пропишите: js productionSourceMap: false Для Vite: js build: { sourcemap: false }

Как анализировать размер итогового бандла?

Ответ:
Для Vue CLI — подключите webpack-bundle-analyzer: npm install --save-dev webpack-bundle-analyzer vue-cli-service build --report Для Vite — используйте rollup-plugin-visualizer.