Die Pfade sind alle korrekt und auf die Projektroute kann lokal zugegriffen werden. Die Routing-Adresse 404 wird jedoch nach der Bereitstellung hinzugefügt. Tatsächlich handelt es sich um ein Problem mit der Nginx-Konfiguration. Die Lösung von Zhihus früherem Bruder: Bereitstellung 404 in Nginx für Projekte, die mit vue-cli gepackt sind, und das Problem, nicht zum Routing springen zu können – Zhihu
Das Problem ist eigentlich, dass die Route nicht umgeleitet wird. Eine einfachere Konfigurationsmethode ist try_files $uri $uri/ /index.html; #Directed access path
Im Folgenden wird der Unterschied zwischen try_files und rewrite ausführlich erläutert
Die try_files-Direktive wird verwendet, um bei der Verarbeitung von Anforderungen in Nginx mehrere Dateien oder Pfade auszuprobieren. Ein häufiges Verwendungsszenario besteht in einer Single-Page-Anwendung (SPA), bei der alle Anforderungen an die Homepage (z. B. index.html) weitergeleitet werden, die dann vom Front-End-Routing verarbeitet wird.
Das Folgende ist eine Beispielkonfiguration mit der try_files-Direktive:
nginx
server { listen 8082; server_name localhost; root /path/to/your/static/files; # Geben Sie das Stammverzeichnis der statischen Dateien an
location / { try_files $uri $uri/ /index.html; } } In dieser Konfiguration:
Verwenden Sie die Listen-Direktive, um den Port anzugeben, der überwacht werden soll.
Verwenden Sie die server_name-Direktive, um den Namen des Servers festzulegen (in diesem Beispiel „localhost“).
Verwenden Sie die Root-Direktive, um das Stammverzeichnis statischer Dateien anzugeben. Sie müssen /path/to/your/static/files durch den tatsächlichen statischen Dateipfad ersetzen.
Im location/-Block verwenden wir die try_files-Direktive für die Anforderungsverarbeitung.
$uri stellt den Dateipfad der ursprünglichen Anfrage dar.
$uri/ stellt den ursprünglich angeforderten Dateipfad dar, gefolgt von einem Schrägstrich (wird zur Verarbeitung von Verzeichnisanfragen verwendet).
/index.html bedeutet, dass die Anforderung an die Datei index.html weitergeleitet wird, wenn die beiden vorherigen Pfade nicht vorhanden sind. Auf diese Weise werden in einer Single-Page-Anwendung alle Anforderungen an index.html weitergeleitet und dann über die Front-End-Route verarbeitet.
Bitte ändern Sie das Stammverzeichnis und andere zugehörige Parameter in der Konfiguration entsprechend Ihrer tatsächlichen Situation, um sie an Ihre Projektanforderungen anzupassen.
Die Rewrite-Direktive wird verwendet, um URLs in Nginx neu zu schreiben. Es kann den vom Client angeforderten URI ändern oder die Anforderung an einen anderen Ort umleiten.
Hier sind einige häufige Anwendungsbeispiele der Rewrite-Direktive:
Schreiben Sie den angegebenen Pfad neu:
nginx
location /old-path { rewrite ^/old-path/(.*)$ /new-path/$1 break; } Diese Konfiguration schreibt alle Anfragen, die mit /old-path/ beginnen, in /new-path/ um. und behält der Inhalt des ursprünglichen Pfades.
Zur neuen URL weiterleiten:
nginx
location /redirect-me { rewrite ^/redirect-me$ http://example.com/new-location permanent; } Diese Konfiguration leitet Anfragen für den /redirect-me-Pfad an http://example.com/new um – Geben Sie den Standort an und verwenden Sie den permanenten Parameter, um eine permanente Umleitung anzugeben.
Verwendung regulärer Ausdrücke zum Umschreiben von URLs:
nginx
location ~ ^/category/([az]+)$ { rewrite ^/category/([az]+)$ /products?category=$1 last; } Diese Konfiguration entspricht dem Pfad /category/ gefolgt von Kleinbuchstaben, und schreiben Sie es als /products?category= um, gefolgt von den passenden Kleinbuchstaben als Argumente.
Bitte beachten Sie, dass dies nur einige grundlegende Beispielanwendungen der Rewrite-Direktive sind. In tatsächlichen Anwendungen müssen Sie möglicherweise komplexere reguläre Ausdrucksmuster verwenden oder andere Anweisungen kombinieren, um Umschreibvorgänge basierend auf bestimmten Anforderungen durchzuführen. Die spezifische Verwendung hängt von Ihren Anforderungen und der Konfigurationsumgebung ab.