Ошибка при перезагрузке страницы в собранном проекте vue js?

Question

[Gregory]

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

В dev сборке все работало.
Сделал npm run build.
Залил собранный проект в нужную директорию в Apache.
Запустил сервер - все работает. По страницам переходит все окей.
Но!
Если я на любой странице делаю релоад выдает ошибку:

А в dev сборке все окей при этом.
Кто знает как исправить эту проблему?

Answer 1

[RidgeA]

Потому что SPA
Роутинг в SPA происходит на клиенте. Когда ты делаешь reload на странице то запрос с "/diary" идет на веб-сервер, а там такого роута нет.
Надо настроить веб-сервер что бы при 404 ошибках он загружал роут "/" (или другую точку входа на SPA), а в SPA уже должен происходить роутинг.

Dev-сборка, скорее всего, запускает какой-то dev-сервер, где уже это настроено

Comments

[Gregory]

RidgeA, спасибо.

Answer 2

[Дмитрий Кузнецов]

Используйте эту инструкцию: https://router.vuejs.org/ru/essentials/history-mod...

Comments

[Gregory]

Дмитрий Кузнецов , благодарю, пойду пробовать.

[Gregory]

Дмитрий Кузнецов, а не подскажете в какое место именно записывать этот кусок?

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Добавлял в разные места файла httpd.conf не помогло.
В гугле тоже не нашел...

[Дмитрий Кузнецов]

файл должен быть таким ".htaccess" (название файла пустое, а расширение файла htaccess) и пихаете его в корневую директорию сайта. По идеи так должно работать.
PS: Так я тестировал на Apache, возможно, если у вас что-то другое, то уже нужно узнавать название файла для вашего web-сервера.