So verbergen Sie das #-Symbol im Zugriffspfad, wenn Uniapp als H5-Version veröffentlicht wird

Uniapp erfreut sich bei der Entwicklung mobiler APPs und kleiner Programme großer Beliebtheit. Manchmal müssen wir durch Uniapp-Paketierung eine H5/WAP-Version generieren, damit die H5-Funktion die Funktionen des APP-Applets synchronisieren kann, anstatt den Funktionsmodulcode eines Terminals neu zu schreiben.

Aber ich habe festgestellt, dass unser Seitenzugriffspfad bei der Entwicklung der H5-Version ein „#“-Zeichen hat, zum Beispiel: https://h5.shopwind.net/#/pages/index/index. Dies betrifft nicht nur Erscheinungsbild, wirkt sich aber auch auf das Erscheinungsbild aus. In einigen Fällen wird das „#“-Zeichen herausgefiltert, was zu Routingfehlern führt. Wenn wir uns beispielsweise beim offiziellen WeChat-Konto auf der H5-Seite anmelden, wird die Absenderadresse mit dem „“ angezeigt. Das Zeichen „#“ wird automatisch herausgefiltert, was dazu führt, dass kein Rückruf zur richtigen Seite möglich ist. Die Lösung lautet wie folgt:

1. Öffnen Sie mit dem Hbuilder-Tool die Datei manifest.json und navigieren Sie zu: H5-Konfiguration – >Routing-Modus->Wählen Sie den Verlaufsmodus aus

Zu diesem Zeitpunkt werden Sie feststellen, dass nach dem Öffnen der Seite das „#“-Zeichen entfernt wurde und wir normal darauf zugreifen konnten Als wir die Seite aktualisierten, wurde ein „404“-Fehler gemeldet. Wir öffneten unsere Augen und überprüften sorgfältig, ob die URL falsch war, und stellten fest, dass die URL nicht falsch war! ! Das ist seltsam!
Keine Sorge, um das oben genannte Problem zu lösen, müssen Sie Folgendes verstehen:
1) Hash – das #-Symbol in der URL in der Adressleiste. Obwohl der Hash in der URL erscheint, wird er nicht in die HTTP-Anfrage aufgenommen und hat keinerlei Auswirkungen auf das Backend, sodass eine Änderung des Hashs die Seite nicht neu lädt.
2) Verlauf – nutzt die neuen Methoden pushState() und replaceState() in der HTML5-Verlaufsschnittstelle. Ein bestimmter Browser muss den Verlaufsmodus unterstützen. Es tritt ein 404-Fehler auf und eine Hintergrundkonfiguration ist erforderlich.
3) Im Hash-Modus wird nur der Inhalt vor dem Hash-Symbol in die Anfrage einbezogen, z. B. https://www.shopwind.net, sodass dies für das Backend der Fall ist, selbst wenn keine vollständige Abdeckung des Routings erreicht wird Es wird kein 404-Fehler zurückgegeben.
4) Im Verlaufsmodus muss die Front-End-URL mit der URL übereinstimmen, die die Anfrage an das Back-End tatsächlich initiiert, z. B. https://www.shopwind.net/a /. Wenn dem Backend die Routing-Verarbeitung für /a fehlt, wird ein 404-Fehler zurückgegeben

2. Serverkonfiguration

Nach dem Packen des H5-Codes und dem Hochladen auf den Server ist eine pseudostatische Konfiguration erforderlich.

Nginx im Verlaufsmodus konfigurieren

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

Apache im Verlaufsmodus konfigurieren

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

H5-Fallreferenz: https://h5.shopwind.net
uniapp Development Exchange

Das obige ist der detaillierte Inhalt vonSo verbergen Sie das #-Symbol im Zugriffspfad, wenn Uniapp als H5-Version veröffentlicht wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!