Problem przy odświeżaniu strony Vue.js

Question

Hej, mógłby mi ktoś pomóc rozwiązać problem z https://news-up.com/ <- tą stroną? Chodzi o błąd 404 który pojawia się po przejściu na podstronę i odświeżeniu. Najprościej zobaczyć o co chodzi po przejściu na stronę "zaloguj się" i odświeżeniu strony, pokaże się błąd 404. Całość jest oparta na Vue.js (dodatkowo quasar) i backend w Laravel

Answer 1

Wygląda jakbyś nie skonfigurował serwera www tak, aby wszystkie żądania kierował na aplikację. Czyli inaczej mówiąc w momencie, gdy otwierasz adres news-up.com/zaloguj-się to serwer szuka dokładnie fizycznego pliku zaloguj-się, bo nie wie że ten adres ma skierować do aplikacji, która ma jakiś tam jeden plik wejściowy, który dopiero to wszystko obsłuży.

Nie jestem pewien czy Twój frontend w Vue jest osobną aplikacją albo to jest połączone z Laravelem od razu czy jeszcze jakoś inaczej to robisz. Przykładowo dla samego Vue routera tu jest to opisane wraz z przykładową konfiguracją: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Answer 2

Wchodząc na stronę "news-up.com" router Vue "przejmuje" zmiany URLa w przeglądarce. Po przejściu na stronę logowania to jest tak na prawdę nadal jeden dokument HTML, tylko Vue dynamicznie ładuje stronę logowania. Odświeżenie powoduje, że do serwera idzie zapytanie po stronę "https://news-up.com/zaloguj-się", a błąd 404 świadczy o tym, że serwer tego nie obsłużył, a skoro strona się nie załadowała, to Vue nie miał okazji się uruchomić, więc nie zadziałał router na froncie.

Prostym rozwiązaniem jest ustawienie po stronie serwera, żeby zwracało główną stronę na każdy request po konkretny URL (tzw. wildcard), a wtedy router Vue (bądź innego frameworka SPA) obsłuży ten adres prawidłowo ładując docelową stronę.

Comments

Należy to ustawić w pliku htaccess czy gdzieś w konfiguracji serwera?

---

Tam gdzie masz routing w Laravelu.

---

Tylko w laravelu mam samo api w pliku routes/api.php więc muszę na górze pliku dodać jakieś przekierowanie na główny url czy jak to ma wyglądać?

---

Tutaj jest dokumentacja routingu: https://laravel.com/docs/7.x/routing#basic-routing

Nie znam Laravela, ale "na logikę" powinno zadziałać dodanie route na ścieżkę '*' i żeby to zwracało stronę główną.

Coś takiego: https://stackoverflow.com/a/13297541/4983840

Answer 3

Idealnie działa dodanie tego kodu do pliku .htaccess (w moim przypadku w katalogu głównym)

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

 

Answer 4

Sytuacja dosyć jasna. 404 oznacza iż nie znaleziono nic pod tym adresem. Co masz w routes/web.php ? Masz ustawiony endpoint na takie adresy jakie są w pasku przeglądarki pokazane?

Comments

Adresy w pasku to adresy z router'a vue.js Mam oddzielony front od zaplecza i wszystko łączę poprzez API. Myślę że ważnym faktem jest jeszcze to iż problem występuje tylko na produkcji natomiast lokalnie nie ma tego problemu, Stronę można odświeżać i jest ok. Czy to może być problem z serwerem?

---

Spoko, trochę się interesuję Vue od jakiegoś czasu, ale do routera jeszcze nie doszedłem. :) Podejrzewam, że jest jak kolega opisał poniżej, tak jakby strzał leciał do Larvy a nie do routera Vue