Сборка и развёртывание — Развёртывание на Vercel

В этой главе вы узнаете, как собрать локально разработанный проект блога и бесплатно развернуть его в интернете, получив публичную ссылку для доступа.

Соберите production-сборку

При разработке запуститеnpm run dev, Vite запустит локальный сервер разработки с поддержкой горячих обновлений.

Но для развертывания нужныоптимизированные, небольшие по размеру файлы— это production-сборка.

$ npm run build

После его запускаdist/папка будет создана в корневом каталоге проекта:

dist/
├── index.html                # 入口 HTML（资源引用已被替换为构建后的路径）
├── assets/
│   ├── index-Df3aBc9x.js    # 打包后的 JS（代码已压缩、tree-shaking）
│   ├── index-Gh7jKl2m.css   # 打包后的 CSS（已提取、压缩）
│   └── ...                   # 其他资源
├── posts.json                # public 目录的文件原样复制
└── favicon.ico               # 其他静态资源

Обратите внимание на несколько ключевых изменений:

• Имена файлов содержат хеш (например,Df3aBc9x); если содержимое меняется, хеш меняется, что используется для управления кешем браузера
• Код былминифицирован и прошёл tree-shaking(удаление неиспользуемого кода)
• JS и CSS разделены на отдельные файлы
• public/Содержимое каталога копируется как есть в корневой каталог

Чтобы предварительно просмотреть результат сборки, запуститеnpx vite preview; он запустит локальный сервер в режиме production, чтобы имитировать боевую среду.

Отправьте проект на GitHub

Платформы развёртывания (например, Vercel) обычно забирают код из Git-репозитория и собирают его автоматически, поэтому сначала нужно загрузить проект на GitHub.

Шаг 1: Создайте репозиторий GitHub

Нажмите + в правом верхнем углу сайта GitHub → New repository и заполните:

• Имя репозитория：blog-app
• Установите Public (для бесплатного развертывания)
• Не устанавливайте флажок "Initialize this repository with a README" (потому что файлы проекта уже есть локально)

Шаг 2: Инициализируйте Git локально и выполните push

$ cd blog-app
$ git init
$ git add .
$ git commit -m "初始化博客项目"
$ git branch -M main
$ git remote add origin https://github.com/你的用户名/blog-app.git
$ git push -u origin main

После успешного push обновите страницу GitHub, и вы увидите все файлы проекта.

Перед отправкой убедитесь.gitignoreфайл уже содержитnode_modulesиdist. node_modules не следует загружать (его можно восстановить с помощью npm install), а dist должен автоматически генерироваться платформой сборки.

Развёртывание на Vercel

Vercel— сейчас самая популярная платформа для развёртывания фронтенда, с поддержкой проектов Vue/Vite без конфигурации.

Шаги развёртывания

1. Visitvercel.com, зарегистрируйтесь или войдите с помощью аккаунта GitHub
2. Нажмите "New Project" → Import Git Repository → выберите репозиторий blog-app
3. Vercel автоматически определяет, что проект — Vite (Vue), конфигурация не требуется
4. Нажмите "Deploy", подождите несколько десятков секунд, сборка завершится
5. После успешного развёртывания вы получите ссылку, например:https://blog-app.vercel.app

Автоматическое развёртывание

С этого момента, каждый раз, когда вы изменяете код локально и отправляете в GitHub (git push), Vercel будет автоматически:

1. Обнаруживать, что в репозитории появились новые коммиты
2. Забирать последний код, выполнять npm install
3. Выполнять npm run build
4. Развёртывать в production

Весь процесс не требует ручных действий; сделайте push — и всё заработает.

Собственный домен (необязательно)

Vercel предоставляет.vercel.appбесплатные поддомены, а также можно привязать собственный домен.

1. В Dashboard проекта Vercel → Settings → Domains
2. Введите ваш домен (например, blog.example.com)
3. Следуйте подсказкам, чтобы добавить CNAME-запись у вашего DNS-провайдера, указывающую наcname.vercel-dns.com
4. Дождитесь, пока DNS вступит в силу (обычно от нескольких минут до нескольких часов); Vercel автоматически запросит SSL-сертификат

Следующие направления обучения

Вы освоили основные навыки Vue3. Ниже — продвинутый путь в зависимости от разных целей: