Szenen
Im Vue-Projekt verwendet das Routing den Verlaufsmodus. Beim Zugriff auf das Projekt kann normal darauf zugegriffen werden. Wenn wir jedoch die Seite aktualisieren oder direkt auf den Pfad zugreifen, wird 404 zurückgegeben.
Ursachenanalyse
Im Verlaufsmodus werden die Schnittstellenänderungen durch das Abhören des Popstate-Ereignisses gesteuert, und ein Link-Klick-Ereignis wird abgehört. Die Methoden „history.pushState“ und „history.replaceState“ werden verwendet, um die URL zu ändern, um einen Teil des Seiteninhalts zu aktualisieren, ohne ein Ereignis zu initiieren http-Anfrage. Wenn die Seite jedoch direkt aktualisiert wird oder direkt auf den Pfad zugegriffen wird, wird eine HTTP-Anfrage an den Server initiiert, das Ziel ist jedoch nicht auf dem Server vorhanden, sodass 404 zurückgegeben wird.
Lösung
Offizielle Konfigurationsanleitung
Die Nginx-Konfiguration lautet wie folgt:
server {
listen 8082;
location / {
root /opt/dist/vue-history;
index index.html index.html;
try_files $uri $uri/ /index.html;
}
}
expandieren
Nach der Bereitstellung wird beim Zugriff auf einige Seiten der Fehler Uncaught SyntaxError: Unexpected token '<' gemeldet.
Lösung:
Zuerst war publicPath „./“ und muss in „/“ geändert werden, d. h. vue.config.jsdie Konfiguration in ändern
module.exports = {
...
publicPath: '/',
}
Zusammenfassen
Im Folgenden sind einige Probleme aufgeführt, die beim Bereitstellen von Routing in Vue im Verlaufsmodus auftreten. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein!