Почему сайт на Vue.js возвращает 404 страницу?
При разработке используется 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 шт):
Когда вы переходите по 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: [...] })