Как выложить сайт на Vue 3 на GH-Pages?

Для того чтобы разместить сайт, созданный с использованием Vue.js 3, на GH-Pages, вам потребуется выполнить несколько шагов. Ниже я подробно опишу процесс:

Шаг 1: Установка Vue CLI
Vue CLI - это инструмент командной строки, который позволяет создавать и управлять проектами Vue. Установите Vue CLI, выполнив следующую команду в вашем терминале:

npm install -g @vue/cli

Шаг 2: Создание проекта Vue
Создайте новый проект с помощью Vue CLI. В вашей командной строке выполните следующую команду:

vue create your-project-name

Вы можете заменить your-project-name на желаемое имя вашего проекта. В ходе выполнения этой команды вам будет предложено выбрать предустановленные настройки проекта. Рекомендуется использовать настройки по умолчанию.

Шаг 3: Деплой GH-Pages
Добавьте плагин gh-pages в ваш проект с помощью следующей команды:

vue add gh-pages

Этот плагин настроит ваш проект для деплоя на GH-Pages и добавит необходимую конфигурацию.

Шаг 4: Настройка публичного пути
Измените значение publicPath в файле vue.config.js, добавив следующую строчку кода:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-project-name/'
    : '/',
};

Убедитесь, что вы заменили your-project-name на фактическое имя вашего проекта.

Шаг 5: Сборка проекта
Теперь вы можете собрать ваш проект для публикации с помощью команды:

npm run build

Эта команда создаст оптимизированную версию вашего проекта в папке dist.

Шаг 6: Публикация на GH-Pages
Перейдите внутрь папки dist выполните следующие команды:

cd dist
git init
git add -A
git commit -m 'Deploy'

Шаг 7: Обновление настроек репозитория GH-Pages
На странице настроек вашего репозитория на GitHub найдите раздел "GitHub Pages" и выберите "master branch" в качестве источника.

Шаг 8: Публикация проекта
Вернитесь в ваш терминал и выполните следующие команды:

git remote add origin https://github.com/your-username/your-repo.git
git push -u origin master

Убедитесь, что вы заменили your-username на ваше имя пользователя GitHub и your-repo на имя вашего репозитория.

После завершения этого шага ваш проект Vue будет опубликован на GH-Pages. Ваш сайт будет доступен по адресу https://your-username.github.io/your-repo/.

Это все! Теперь ваш сайт Vue, созданный с использованием Vue.js 3, размещен на GH-Pages.