Ошибка 404 на странице, которая существует и отлично работает через внутреннюю ссылку

Question

Я создал сайт с несколькими страницами на Vue. js.

Все работает нормально локально, но при развертывании на Heroku все страницы работают только тогда, когда я нажимаю на внутреннюю ссылку в моем меню, которая перенаправляет на соответствующую страницу (с использованием маршрутизатора pu sh).

Когда я пытаюсь получить доступ к прямой / любой странице из браузера, я получаю 404 с сообщением «Cannot GET / any-page» , тогда как та же страница отображается правильно при нажатии на ссылку.

Как я уже упоминал, когда я обслуживаю свое приложение локально, у меня нет этой проблемы.

Я действительно не могу посмотрим, откуда это может взяться, заранее спасибо за вашу помощь.

Answer 1

В официальной документации Vue CLI есть руководство по развертыванию специально для Heroku .

Вы быстро заметите соответствующую информацию:

stati c. json

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

Для SPA (одностраничных приложений) вы захотите указать каждый маршрут на индекс. Маршрутизатор Vue позаботится о переходе на нужную страницу.

Answer 2

Heroku обслуживает содержимое вашей папки сборки Vue. Поскольку Vue строит приложение как единый файл index. html, работает только основной маршрут.

Vue фактически не переходит к маршруту, а скорее переписывает URL-адрес браузера с использованием API истории и обрабатывает загрузку нового маршрута.

Вы можете использовать один из следующих вариантов:

OPTION 1

Вы можете использовать mode: "hash", чтобы исправить маршруты при перезагрузке страницы. Однако это добавит # перед каждым маршрутом.

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

ВАРИАНТ 2

Напишите приложение Node.JS (например, Express), которое маршрутизирует каждый запрос к вашему index. html файлу. Это называется промежуточное ПО

Ссылка: https://router.vuejs.org/guide/essentials/history-mode.html#example -server-configurations