создать и опубликовать папку dist на страницах github - PullRequest
Новая
       42

создать и опубликовать папку dist на страницах github

1 голос
/ 17 июня 2019

Я создал проект с Vue.js и Vuetify, используя Vue CLI. Я хотел бы разместить это приложение на Github Pages. Итак, я взял руководство отсюда

https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch

и я не использую исторический moute маршрутизатора Vue (https://router.vuejs.org/guide/essentials/history-mode.html), чтобы убедиться, что мне не нужен сервер.

Я создал сборку своего проекта и переименовал сгенерированную папку dist в docs. Эта папка документов находится в корневом каталоге (где она была сгенерирована). Когда я выбираю master branch / docs folder в качестве источника публикации на Github Pages, я получаю пустую белую страницу.

Когда я проверяю консоль, я получаю

Не удалось загрузить ресурс: сервер ответил со статусом 404 ()

для каждого файла, сгенерированного в папке dist / docs. Чего мне не хватает?

1 Ответ

3 голосов
/ 17 июня 2019

Это может быть связано с тем, что корневой путь вашего приложения настроен на просмотр корня вашего github, а не корня хранилища.

Похоже, вы используете vue-cli-3 из тегов. Итак, вот что я сделал для развертывания приложения Vue для размещения на страницах github.

  1. Создайте файл vue.config.js в корне вашего приложения.

  2. В этом файле укажите открытый путь, соответствующий имени хранилища. 

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/YOUR_REPO_NAME/' : '/'
}

  1. Создайте файл deploy.sh в корне вашего приложения.

  2. В файле напишите следующее 

set -e

npm run build

cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages

cd -

  1. Теперь из командной строки, в корне вашего приложения, вы можете запустить sh deploy.sh. Это запустит команду сборки для vue-cli, перейдет в папку dist, зафиксирует эти файлы и отправит их в ветку gh-pages.

  2. Затем вы можете настроить репозиторий github на использование gh-страниц вместо документов. Поскольку вы упомянули, что вы не используете режим history для vue-router, вы должны увидеть # в строке URL, и он будет работать, когда пользователь обновит страницу по другому маршруту, отличному от home.

Надеюсь, это поможет вам в правильном направлении для развертывания и размещения вашего приложения Vue на страницах github.

...