Разверните Vue на GitHub Pages. Ошибка с vue-router

Question

У меня возникли некоторые проблемы при развертывании сборки приложения Vue с vue-cli v3.0. на страницы GitHub. Я использую поддерево , чтобы отправить папку dist только в ветку gh-pages. Сначала проблема заключалась в том, что активы не были найдены , но я исправил это с помощью baseUrl на vue.config.js. Теперь проблема в том, что элемент #app пуст. Я обнаружил, что если я не использую vue-router (визуализируем представление вместо использования <router-view/>), приложение отлично работает со страницами GitHub. Я полагаю, что есть какая-то проблема с опцией route path, но я не могу понять, как это исправить.

Хранилище с проблемой - https://github.com/guizoxxv/vue-cli-deploy, а ссылка на страницу GitHub - https://guizoxxv.github.io/vue-cli-deploy/

Спасибо.

Answer 1

Мне кажется, я обнаружил причину этой проблемы:

Поскольку GitHub Pages URL не обслуживается из корня

https://guizoxxv.github.io/vue-cli-deploy/ имеет vue-cli-deploy/ после корня /

Мне нужно указать опцию base для моего приложения в опциях vue-router. Вот документация https://router.vuejs.org/api/#base

Answer 2

По умолчанию Vue CLI предполагает, что ваше приложение будет развернуто в корне домена, например https://www.my -app.com / . Если ваше приложение развернуто в подпуть, вам нужно будет указать этот подпуть, используя эту опцию. Например, если ваше приложение развернуто в https://www.foobar.com/my-app/,, установите baseUrl в «/ my-app /». Итак:

1. Создайте новый файл в корневом каталоге вашего проекта и назовите его «vue.config.js»

2. В файле «vue.config.js» вставьте следующий код:

   module.exports = { baseUrl: ‘/my-first-project/’ }

ПРИМЕЧАНИЕ: в baseUrl внутри // символов необходимо указать название вашего проекта.

Подробнее здесь

Также читайте полную статью о том, как развернуть проект vue.js на страницах github здесь

Answer 3

вы можете попробовать это в вашем main.js

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
});