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
    Commented 2 янв. 2021 в 12:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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