1

При разработке используется vue 3.0.4 и vue-router 4.0.2

Роутер настроен стандартно:

{
  path: '/',
  component: () => import('../views/Home.vue')
},
{
  path: '/about',
  component: () => import('../views/About.vue')
}

Сайт располагается на GitHub Pages по адресу user.github.io/sitename/

Если зайти на сайт по адресу user.github.io/sitename/, и затем по ссылке со страницы Home перейти на страницу user.github.io/sitename/about, то страница About отображается

Если же в адресной строке браузера сразу попытаться перейти по адресу user.github.io/sitename/about, то отображается 404 страница GitHub Pages

В файле vue.config.js прописал publicPath: '/sitename/', но не помогло

Подскажите, почему такое может происходить, и как это можно исправить?

1 ответ 1

3

Когда вы переходите по user.github.io/sitename/, веб-сервер GH Pages отдаёт index.html, включающий в себя информацию о скриптах и стилях - таким образом запускается vue-приложение. После запуска приложения корректно работает vue-router и user.github.io/sitename/about становится доступен.

Но при прямом заходе на user.github.io/sitename/about веб-сервер не знает, какой файл ему отдать - там нет index.html. Поэтому и возвращается 404 ошибка.

Я не уверен, что можно сконфигурировать веб-сервер GH Pages так, чтобы он на любой запрос отдавал index.html из корня приложения, зато можно настроить работу vue-роутера с history mode на hash. Для этого достаточно при конфигурировании роутера заменить history на hash:

const router = new VueRouter({ mode: 'hash', routes: [...] })

Больше информации о конфигурировании роутера

Описание проблемы в доке vue

Описание history mode в доке vue-router

1
  • Благодарю за ответ. Буду более внимательно изучать документацию
    – mccrush
    2 янв 2021 в 12:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.