Comment masquer le symbole # dans le chemin d'accès lorsque Uniapp est publié en version H5

Uniapp est devenu très populaire dans le développement d'applications mobiles et de petits programmes. Parfois, nous devons générer une version H5/wap via le packaging uniapp afin que la fonction H5 puisse synchroniser les fonctions de l'applet APP au lieu de réécrire le code du module de fonction d'un terminal.

Mais j'ai découvert que lors du développement de la version H5, le chemin d'accès à notre page aura un signe "#", par exemple : https://h5.shopwind.net/#/pages/index/index Cela n'affecte pas seulement le. L'apparence, mais affecte également l'apparence. Dans certains cas, le signe "#" sera filtré, entraînant des erreurs de routage. Par exemple, lorsque nous nous connectons au compte officiel WeChat côté H5, l'adresse de retour avec le ". Le signe #" sera automatiquement filtré, ce qui entraînera l'impossibilité de rappeler la bonne page. , la solution est la suivante :

1. Utilisez l'outil Hbuilder pour ouvrir le fichier manifest.json, accédez à : Configuration H5- >Mode de routage->Sélectionnez le mode historique

À ce moment-là, vous constaterez qu'après avoir ouvert la page, elle a été supprimée. Le signe "#" a été ajouté et nous avons pu y accéder normalement. nous avons actualisé la page, une erreur « 404 » a été signalée. Nous avons ouvert les yeux et soigneusement vérifié si l'URL était erronée, et avons constaté que l'URL n'était pas fausse ! ! C'est étrange !
Ne vous inquiétez pas, pour résoudre le problème ci-dessus, vous devez comprendre ce qui suit :
1) hachage - le symbole # dans l'URL dans la barre d'adresse. Bien que le hachage apparaisse dans l'URL, il ne sera pas inclus dans la requête HTTP et n'aura aucun impact sur le backend, donc changer le hachage ne rechargera pas la page.
2) history - tire parti des nouvelles méthodes pushState() et replaceState() dans l'interface d'historique HTML5. Un navigateur spécifique doit prendre en charge le mode historique. Une erreur 404 se produira et une configuration en arrière-plan est requise.
3) En mode hachage, seul le contenu avant le symbole dièse sera inclus dans la requête, comme https://www.shopwind.net, donc pour le backend, même si une couverture complète du routage n'est pas atteinte, il le sera non Une erreur 404 sera renvoyée ;
4) En mode historique, l'URL du front-end doit être cohérente avec l'URL qui initie réellement la requête vers le back-end, telle que https://www.shopwind.net/a /. Si le backend ne dispose pas de traitement de routage pour /a, une erreur 404 sera renvoyée

2. Configuration du serveur

Après avoir empaqueté le code H5 et l'avoir téléchargé sur le serveur, une configuration pseudo-statique est requise.

Configuration de nginx en mode historique

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

Configuration d'Apache en mode historique

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

Référence de cas H5 : https://h5.shopwind.net
échange de développement uniapp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!