trailing slash guide

Guide de barre de fuite

Avez-vous des problèmes de barre de traînée après avoir déployé un site Web statique en production?

Ce repo explique factuellement le comportement de:

• Générateurs de sites statiques
• Hébergement des fournisseurs

Nous suggérons également quelques solutions possibles

Introduction

Faisons plus familiarisé avec les problèmes de barre de traîne.

Problèmes courants :

• Problèmes de référencement / perf: Lors de la navigation /myPath , votre hôte redirige vers /myPath/
• 404 problèmes: un lien relatif tel que <a href="otherPath"> sont résolus différemment ( /otherPath ou /myPath/otherPath en fonction de la présence / absence d'une barre oblique arrière
• PROBLÈMES UX: Votre hôte ajoute une barre oblique de fuite, et plus tard, votre routeur de frontend d'application à une seule page le supprime, conduisant à une expérience déroutante et à une URL clignotante

Causes :

• Les générateurs de sites statiques peuvent émettre différents fichiers pour le même chemin /myPath : /myPath.html ou /myPath/index.html (le dernier peut conduire à une barre de fin supplémentaire)
• Les fournisseurs d'accueil ont tous un comportement différent lors de la description des fichiers statiques, il n'y a pas de norme

Résumé

Considérant ce site statique:

static
│
├── file.html
│
├── folder
│   └── index.html
│
├── both.html
└── both
    └── index.html

Comportement de divers fournisseurs d'hébergement statique:

Hôte	Paramètres	URL	/déposer	/déposer/	/file.html	/dossier	/dossier/	/folder/index.html	/les deux	/les deux/	/ both.html	/ both/index.html
Pages github		lien	✅	? 404	✅	➡️ / dossier /	✅	✅	✅	✅	✅	✅
Gré	Par défaut: jolies URL sur	lien	✅	➡️ / Fichier	✅	➡️ / dossier /	✅	✅	✅	➡️ / les deux	✅	✅
Gré	Jolies URL	lien	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Vercel	Par défaut: CleanUrls = Faux sous-traitants = Undefined	lien	? 404	? 404	✅	✅	✅	✅	✅	✅	✅	✅
Vercel	CleanUrls = Faux Faillingslash = False	lien	? 404	? 404	✅	✅	➡️ / dossier	✅	✅	➡️ / les deux	✅	✅
Vercel	CleanUrls = False Faillingslash = True	lien	? 404	? 404	✅	➡️ / dossier /	✅	✅	➡️ / les deux /	✅	✅	✅
Vercel	CleanUrls = True Baillingslash = Undefined	lien	✅	✅	➡️ / Fichier	✅	✅	➡️ / dossier	✅	✅	➡️ / les deux	➡️ / les deux
Vercel	CleanUrls = True Faillingslash = False	lien	✅	➡️ / Fichier	➡️ / Fichier	✅	➡️ / dossier	➡️ / dossier	✅	➡️ / les deux	➡️ / les deux	➡️ / les deux
Vercel	CleanUrls = True Faillingslash = True	lien	➡️ / fichier /	✅	➡️ / fichier /	➡️ / dossier /	✅	➡️ / dossier /	➡️ / les deux /	✅	➡️ / les deux /	➡️ / les deux /
Pages de cloudflare		lien	✅	➡️ / Fichier	➡️ / Fichier	➡️ / dossier /	✅	➡️ / dossier /	✅	✅	➡️ / les deux	➡️ / les deux /
Rendre		lien	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Applications Web statiques Azure		lien	✅	➡️ / Fichier	✅	✅	✅	✅	✅	✅	✅	✅

Aide recherchée

Gardons cette ressource à jour et rendons-les exhaustifs ensemble.