Как развернуть приложение Vue на страницах Github
GitHub Pages - отличный бесплатный вариант для развертывания вашего приложения Vue. Это статическая служба хостинга сайтов, которая берет файлы прямо из репозитория на GitHub.
Отличительной чертой Github Pages является то, что их довольно легко настроить, если вы знаете, как они работают. И именно этим мы займемся сегодня!
В этом уроке мы рассмотрим:
- Основы Github Pages
- Настройка проекта Vue для работы с Github Pages
- Развертывание проекта Vue
- Настройка Vue Router в этой среде развертывания
Многие из этих шагов основаны на этой замечательной статье Роланда в сочетании с некоторыми советами, которые я нашел при развертывании демонстрационного пространства Vue3.
Хорошо, приступим.
Как работают страницы Github
Github Pages позволяет обслуживать статические файлы HTML, CSS и Javascript из репозитория Github. С точки зрения Vue, это означает, что как только мы создадим наш проект, мы можем обслуживать эти файлы до тех пор, пока мы помещаем их в репо.
Один из самых простых способов сделать это - создать отдельную ветку gh-pages в вашем репозитории. Наша конечная цель состоит в том, чтобы эта ветка содержала только нашу папку сборки, которая для многих проектов будет dist.
И мы можем сделать это, используя эту ветку gh-pages как поддерево нашей основной ветки.
Когда мы это сделаем, в этом будет больше смысла, так что вперед.
Настройка вашего проекта
Хорошо, сначала мы должны понять, где будет развернута наша ветка gh-pages. В большинстве случаев URL-адрес развернутого сайта будет GITHUB_USERNAME .github.io / REPO_NAME.
Это означает, что ко всем файлам в нашей ветке gh-pages можно получить доступ, например, по адресу https://matthewmaribojoc.github.io/learnvue-tutorials/main.css.
Хорошо, достаточно справочной информации. Давайте на самом деле разместим наш проект в Интернете.
Шаг 1. Установите publicPath в vue.config.js на имя нашего репозитория
В основной ветке мы хотим создать vue.config.js файл в корневом каталоге нашего проекта. Здесь мы хотим настроить publicPath (который также редактирует publicPath webpack) для маршрутизации всех статических ресурсов по правильному пути.
Если у нас нет этой конфигурации, наш развернутый сайт не будет правильно загружать ресурсы, такие как изображения.
Мы хотим направить его по URL-адресу нашего развернутого сайта Github Pages, который мы можем найти в настройках нашего репозитория.
Мы хотим взять путь, указанный в этом красном поле - все, что находится после github.io - и использовать его в нашем vue.config.js like this.
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/REPO_NAME/'
: '/'
}Теперь, когда мы развертываем наш сайт, все статические ресурсы должны загружаться по правильным путям.
Развертывание вашего проекта Vue
Настроив Vue publicPath, мы можем приступить к развертыванию нашего проекта.
Шаг 2. Создайте свой проект с помощью npm build
Этот шаг не требует пояснений, нам действительно нужна папка dist для развертывания.
Шаг 3. Запустите git add dist и git commit -m 'adding dist subtree'
Это фиксирует наши изменения в главной ветке, так что мы можем создать dist поддерево на следующем шаге. Убедитесь, что dist не включен в ваш .gitignore файл!
Шаг 4. Запустите git subtree push --prefix dist origin gh-pages
Этот шаг делает gh-страницы поддеревом нашей основной ветки. Параметр префикса указывает папку, в которой мы хотим разместить наше поддерево. Если мы посмотрим на нашу ветку gh-pages, мы увидим, что она эквивалентна корню папки dist.
Шаг 5. Готово!
Через несколько минут страницы Github должны обновиться с учетом ваших последних изменений в репозитории, и вы сможете увидеть свой проект Vue в Интернете. Захватывающе!
Совет - обработка Vue Router с пользовательской страницей 404
Одна вещь, которую я обнаружил при настройке своего сайта Github Pages, заключается в том, что работа с Vue Router становится немного сложной.
Если вы используете режим истории в маршрутизаторе Vue, вы заметите, что если вы попытаетесь перейти непосредственно на страницу, отличную от /, вы получите ошибку 404. Это связано с тем, что Github Pages не перенаправляет автоматически все запросы на обслуживание index.html.
К счастью, есть небольшой обходной путь.
Все, что вам нужно сделать, это продублировать ваш index.html файл и назвать копию 404.html.
Это заставляет вашу страницу 404 обслуживать тот же контент, что и ваш index.html - это означает, что ваш маршрутизатор Vue сможет отображать правильную страницу.
Как только вы это сделаете, вам придется повторно выполнить шаги со 2 по 5 из предыдущего, а также вам придется подождать несколько минут, пока ваш сайт обновится с внесенными вами изменениями.
Это оно?
Ага! Настроить и запустить на Github Pages так просто. Есть несколько способов оптимизировать этот процесс, например, написание сценариев оболочки для упрощения процесса или настройка CI, описанная в документации Vue.
Но это отличное место для начала, чтобы вы могли продемонстрировать свои проекты Vue своей семье и друзьям!
Я хотел бы видеть ссылки на ваши страницы Github! Если у вас есть вопросы или комментарии, просто напишите ответ.
Удачи!
