Konfigurationsmethode für den Nicht-Root-Pfad von vue-router + nginx

Dieser Artikel stellt hauptsächlich die Konfigurationsmethode von Vue-Router + Nginx-Nicht-Root-Pfad vor. Jetzt kann ich ihn mit Ihnen teilen

Vue-Router. Standard-Daten-Hash-Modus – verwendet den URL-Hash, um eine vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert.

Im Allgemeinen mögen wir keine hässlichen Hashes. Ähnlich wie bei index.html#/matchResult können Sie den Verlaufsmodus des Routings verwenden. Der Verlaufsmodus verwendet die API „history.pushState“, um Seitensprünge zu implementieren.

Aber es gibt ein Problem, wenn wir Nginx verwenden, müssen wir einige Konfigurationen hinzufügen.

Direkt unter dem Root-Pfad konfigurieren

Direkt unter dem Root-Pfad konfigurieren. Geben Sie beim Zugriff einfach http://yoursite.com ein. Die Konfiguration in nginx ist wie folgt

location / {
  try_files $uri $uri/ /index.html;
}

Nicht-Root-Pfadkonfiguration

Wenn es mehrere Projekte unter einem Domänennamen gibt, ist es nicht angemessen, die Root-Pfadkonfiguration zu verwenden. Wir müssen beispielsweise eine Ebene von Pfaden unter dem Root-Pfad angeben ,

A-Projekt

http://yoursite.com/A

B-Projekt

http://yoursite.com/B

nginx-Konfiguration

    location ^~/A {
            alias /XX/A;//此处为A的路径
            index index.html;
            try_files $uri $uri/ /A/index.html;
    }
    location ^~/B {
            alias /XX/B;//此处为B的路径
            index index.html;
            try_files $uri $uri/ /B/index.html;
    }

Tipp: Beachten Sie, dass Sie Alias ​​und nicht Root

Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Wie Vue das Problem des Aktualisierungsfehlers löst, nachdem addRoutes Routen dynamisch hinzufügt

Vue iview-admin Framework So ändern Sie das Menü der zweiten Ebene in ein Menü der dritten Ebene

Konfiguration|Konfigurationsmethode von Electron+vue+ts+sqlite

Das obige ist der detaillierte Inhalt vonKonfigurationsmethode für den Nicht-Root-Pfad von vue-router + nginx. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!