it-swarm.com.de

Vue Router-Hosting auf Apache2

Ich hoste mein vuejs-Projekt auf dem Apache-Server.

  1. init-Projekt
  2. router einrichten
  3. Erstellen und auf dem Apache-Server gehostet 

const router = new VueRouter({
  routes: Routes,
  // relative: true,
  mode: 'history'
});

Dies funktioniert gut in lokal, aber der vue-Router bricht auf dem Server ab

Wenn ich http://example.com starte und zu http://exmaple.com/sub .__ gehe, funktioniert es gut

aber wenn ich die Seite erneuere, wird 404 Fehler ausgegeben.

Error:  enter image description here

5
Shiv Shankar

Auf der Dokumentationsseite vue.js :

Im Verlaufsmodus wird die URL "normal" aussehen, z. http://oursite.com/user/id . Wunderschönen!

Hier gibt es jedoch ein Problem: Da es sich bei unserer App um eine einseitige clientseitige App ohne korrekte Serverkonfiguration handelt, erhalten die Benutzer einen 404-Fehler, wenn sie auf http://oursite.com/user/id direkt zugreifen in ihrem Browser. Das ist hässlich.

Keine Sorge: Um das Problem zu beheben, müssen Sie lediglich eine einfache Catch-All-Fallback-Route zu Ihrem Server hinzufügen. Wenn die URL nicht mit statischen Elementen übereinstimmt, sollte sie dieselbe index.html-Seite bereitstellen, in der sich Ihre App befindet. Wieder schön!

Apache

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

Es scheint, dass es nicht Ihr Problem ist. Es ist Apache.htaccess.

bitte prüfen Sie einmal, ob Sie auch .htaccess als verborgene Datei auf Ihren Server hochgeladen haben. Möglicherweise haben Sie vergessen, sie hochzuladen.

wenn nicht, können Sie diese Referenzhilfe überprüfen: https://router.vuejs.org/en/essentials/history-mode.html

und fügen Sie Ihre eigene Datei .htaccess hinzu, falls diese nicht vorhanden ist.

1
Hardik Satasiya