Публикация
Общие рекомендации
Если вы используете Vue CLI с бэкенд-фреймворком, который обрабатывает статические ресурсы, как часть своей публикации, всё что вам нужно сделать, это убедиться, что Vue CLI генерирует файлы сборки в правильном месте, а затем следуйте инструкциям по публикации вашего бэкенд-фреймворка.
Если вы разрабатываете фронтенд вашего приложения отдельно от бэкенда — т.е. ваш бэкенд предоставляет только API с которым вы работаете, то по сути ваш фронтенд является чисто статическим приложением. Вы можете публиковать собранный контент в каталоге dist
на любой статический файловый сервер, главное не забудьте установить правильный publicPath.
Локальный предпросмотр
Каталог dist
предназначен для обслуживания HTTP-сервером (если не задали publicPath
относительным значением), поэтому не сработает если напрямую открыть dist/index.html
через file://
протокол. Самый простой способ предпросмотра вашей сборки для production локально — использовать статический файловый сервер Node.js, например serve:
npm install -g serve
# флаг -s означает запуск serve в режиме одностраничного приложения (SPA)
# который решает проблему маршрутизации, описанную ниже
serve -s dist
history.pushState
Маршрутизация через Если вы используете Vue Router в режиме history
, простой статический файловый сервер не подойдёт. Например, если вы использовали Vue Router для маршрута /todos/42
, то сервер разработки уже был настроен для корректного ответа на запрос localhost:3000/todos/42
, но простой статический сервер используемый с production-сборкой будет отвечать ошибкой 404.
Чтобы это исправить, необходимо настроить production сервер так, чтобы index.html
возвращался для любых запросов, не соответствующих статическим файлам. В документации Vue Router есть примеры конфигурации различных серверов.
CORS
Если ваш статический фронтенд публикуется на домен, отличный от домена API бэкенда, то вам необходимо правильно сконфигурировать CORS.
PWA
Если вы используете плагин PWA, ваше приложение необходимо публиковать по HTTPS адресу, чтобы Service Worker смог корректно зарегистрироваться.
Руководства для платформ
GitHub Pages
Установите корректное значение
publicPath
вvue.config.js
.Если вы публикуете по адресу
https://<USERNAME>.github.io/
, вы можете опуститьpublicPath
, так как оно по умолчанию"/"
.Если вы публикуете по адресу
https://<USERNAME>.github.io/<REPO>/
, (т.е. ваш репозиторий находится по адресуhttps://github.com/<USERNAME>/<REPO>
), установитеpublicPath
в значение"/<REPO>/"
. Например, если ваш репозиторий называется "my-project", то вашvue.config.js
будет выглядеть примерно так:module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/' }
Внутри вашего проекта создайте
deploy.sh
со следующим содержимым (при необходимости раскомментировав подсвеченные строки) и запустите его для публикации:#!/usr/bin/env sh # остановить публикацию при ошибках set -e # сборка npm run build # переход в каталог сборки cd dist # если вы публикуете на пользовательский домен # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # если вы публикуете по адресу https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # если вы публикуете по адресу https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd -
Совет
Вы также можете запустить скрипт выше в вашей конфигурации CI чтобы включить автоматическую публикацию на каждый push в репозиторий.
GitLab Pages
Как описано в документации GitLab Pages, всё происходит с файлом .gitlab-ci.yml
, расположенным в корневом каталоге проекта. Вы можете начать с этого рабочего примера:
# .gitlab-ci.yml файл расположен в корневом каталоге репозитория
pages: # задание должно быть именованными страницами
image: node:latest
stage: deploy
script:
- npm ci
- npm run build
- mv public public-vue # GitLab Pages хук для каталога public
- mv dist public # переименование каталога dist (результат команды npm run build)
artifacts:
paths:
- public # путь к артефакту должен быть /public для GitLab Pages
only:
- master
Как правило, по адресу https://yourUserName.gitlab.io/yourProjectName
будет располагаться статический веб-сайт, поэтому вы также захотите создать файл vue.config.js
для указания значения BASE_URL
, соответствующего ему:
// файл vue.config.js расположен в корне вашего репозитория
// убедитесь, что обновили `yourProjectName` на имя вашего проекта GitLab
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/yourProjectName/'
: '/'
}
Изучите документацию по настройке домена в GitLab Pages для получения дополнительной информации об URL-адресе, где ваш веб-сайт будет размещён. Имейте ввиду, что можно также использовать собственный домен.
Закоммитьте оба файла .gitlab-ci.yml
и vue.config.js
перед push в ваш репозиторий. Будет запущен GitLab CI pipeline: при успешном выполнении, откройте Settings > Pages
в вашем проекте, чтобы увидеть ссылку на свой сайт и нажмите на неё.
Netlify
На сайте Netlify добавьте новый проект из GitHub со следующими настройками:
- Build Command:
npm run build
илиyarn build
- Publish directory:
dist
- Build Command:
Нажмите кнопку публикации!
Также посмотрите vue-cli-plugin-netlify-lambda.
Для получения прямых хитов при использовании режима history
во Vue Router, необходимо создавть файл _redirects
в каталоге /public
со следующим содержимым:
# Настройки Netlify для одностраничных приложений (SPA)
/* /index.html 200
Подробнее можно изучить в документации Netlify по перенаправлениям.
Amazon S3
Плагин vue-cli-plugin-s3-deploy.
Firebase
Создайте новый проект Firebase в консоли Firebase. Рекомендуем изучить документацию о том, как настроить проект.
Убедитесь, что у вас глобально установлены firebase-tools:
npm install -g firebase-tools
Из корня вашего проекта инициализируйте firebase
с помощью команды:
firebase init
Firebase задаст несколько вопросов о том, как настроить проект.
- Выберите функции Firebase CLI, которые хотите настроить для проекта. Убедитесь, что выбрали
hosting
. - Выберите проект Firebase по умолчанию для вашего проекта.
- Установите каталог
public
в значениеdist
(или куда генерируется итоговая сборка), который будет загружаться на Firebase Hosting.
// firebase.json
{
"hosting": {
"public": "dist"
}
}
- Выберите
yes
чтобы настроить проект как одностраничное приложение. Это создастindex.html
и в вашем каталогеdist
и добавит настройки вhosting
.
// firebase.json
{
"hosting": {
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Запустите npm run build
для сборки вашего проекта.
Для публикации вашего проекта на Firebase Hosting выполните команду:
firebase deploy --only hosting
Если вы хотите использовать другие возможности Firebase CLI, которые вы используете в своём проекте для публикации, запустите firebase deploy
без опции --only
.
Теперь можно открыть проект по адресу https://<YOUR-PROJECT-ID>.firebaseapp.com
.
Обратитесь к документации Firebase для получения более подробной информации.
Now
- Установите глобально Now CLI:
npm install -g now
Добавьте файл
now.json
в корневой каталог проекта:{ "name": "my-example-app", "type": "static", "static": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] }, "alias": "vue-example", "files": [ "dist" ] }
Можно детальнее настроить статическую публикацию, обратившись к документации Now.
Добавьте скрипт для публикации в
package.json
:"deploy": "npm run build && now && now alias"
Если вы хотите по умолчанию публиковать публично, то измените команду на следующую:
"deploy": "npm run build && now --public && now alias"
Это автоматически установит псевдоним сайта на последнюю публикацию. Теперь просто запустите команду
npm run deploy
для публикации приложения.
Stdlib
TODO | Присылайте пулл-реквесты.
Heroku
TODO | Присылайте пулл-реквесты.
Surge
Публикация с помощью Surge очень проста.
Сначала, вам потребуется собрать проект командой npm run build
. И, если вы не установили утилиту Surge для командной строки, то вы можете сделать это командой:
npm install --global surge
Затем перейдите в каталог dist/
вашего проекта, запустите surge
и следуйте подсказкам на экране. Вас попросят указать электронную почту и пароль, если вы впервые используете Surge. Подтвердите каталог проекта, введите нужный домен и посмотрите как публикуется ваш проект, как примерно выглядит ниже.
project: /Users/user/Documents/myawesomeproject/dist/
domain: myawesomeproject.surge.sh
upload: [====================] 100% eta: 0.0s (31 files, 494256 bytes)
CDN: [====================] 100%
IP: **.**.***.***
Success! - Published to myawesomeproject.surge.sh
Убедитесь, что ваш проект успешно опубликован с помощью Surge открыв в браузере myawesomeproject.surge.sh
! Дополнительные сведения о настройке, такие как конфигурация пользовательских доменов, можно найти на странице справки Surge.
Bitbucket Cloud
Как описывается в документации Bitbucket вам необходимо создать репозиторий названный в точности
<USERNAME>.bitbucket.io
.Возможно публиковать в подкаталог, например, если требуется иметь несколько веб-сайтов. В этом случае укажите корректный
publicPath
в файлеvue.config.js
.Если публикуете по адресу
https://<USERNAME>.bitbucket.io/
, установкуpublicPath
можно опустить, поскольку значение по умолчанию"/"
.Если публикуете по адресу
https://<USERNAME>.bitbucket.io/<SUBFOLDER>/
, нужно задатьpublicPath
в значение"/<SUBFOLDER>/"
. В этом случае структура каталогов должна отражать структуру URL-адресов, например, репозиторий должен иметь каталог/<SUBFOLDER>
.В проекте создайте
deploy.sh
с указанным содержимым и запустите его для публикации:#!/usr/bin/env sh # остановиться при ошибках set -e # сборка npm run build # переход в каталог итоговой сборки cd dist git init git add -A git commit -m 'deploy' git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master cd -