trailing slash guide

トレーリングスラッシュガイド

制作中に静的なWebサイトを展開した後、後続のスラッシュの問題がありますか？

このレポは、事実上、次の行動を説明しています。

• 静的サイトジェネレーター
• ホスティングプロバイダー

また、いくつかの可能な解決策を提案します

イントロ

トレーリングスラッシュの問題にもっと精通しましょう。

一般的な問題：

• SEO /PERFの問題：ブラウジング/myPathの場合、ホストは/myPath/
• 404の問題： <a href="otherPath">などの相対的なリンクは異なって解決されます（ /otherPathまたは/myPath/otherPath後続のスラッシュの存在 /不在に応じて、
• UXの問題：ホストはトレーリングスラッシュを追加し、後でシングルページアプリケーションのフロントエンドルーターが削除し、混乱した体験とちらつきのURLにつながります

原因：

• 静的サイトジェネレーターは/myPath.html同じパス/myPathまたは/myPath/index.htmlに対して異なるファイルを発することができます（後者は追加のトレーリングスラッシュにつながる可能性があります）
• ホストプロバイダーはすべて静的ファイルを提供するときに異なる動作をしています、標準はありません

まとめ

この静的サイトを考慮してください：

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

さまざまな静的ホスティングプロバイダーの動作：

ホスト	設定	URL	/ファイル	/ファイル/	/file.html	/フォルダ	/フォルダ/	/folder/index.html	/両方	/両方/	/both.html	/both/index.html
githubページ		リンク	✅	？ 404	✅	➡➡️ /folder /	✅	✅	✅	✅	✅	✅
netlify	デフォルト：Pretty URLS	リンク	✅	➡➡️ /ファイル	✅	➡➡️ /folder /	✅	✅	✅	➡➡️ /両方	✅	✅
netlify	かなりurlsがオフになります	リンク	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
ヴェルセル	デフォルト：cleanurls = false trailingslash = undefined	リンク	？ 404	？ 404	✅	✅	✅	✅	✅	✅	✅	✅
ヴェルセル	cleanurls = false trailingslash = false	リンク	？ 404	？ 404	✅	✅	➡➡️ /フォルダー	✅	✅	➡➡️ /両方	✅	✅
ヴェルセル	cleanurls = false trailingslash = true	リンク	？ 404	？ 404	✅	➡➡️ /folder /	✅	✅	➡➡️ /両方 /	✅	✅	✅
ヴェルセル	cleanurls = true trailingslash = undefined	リンク	✅	✅	➡➡️ /ファイル	✅	✅	➡➡️ /フォルダー	✅	✅	➡➡️ /両方	➡➡️ /両方
ヴェルセル	cleanurls = true trailingslash = false	リンク	✅	➡➡️ /ファイル	➡➡️ /ファイル	✅	➡➡️ /フォルダー	➡➡️ /フォルダー	✅	➡➡️ /両方	➡➡️ /両方	➡➡️ /両方
ヴェルセル	cleanurls = true trailingslash = true	リンク	➡➡§ /file /	✅	➡➡§ /file /	➡➡️ /folder /	✅	➡➡️ /folder /	➡➡️ /両方 /	✅	➡➡️ /両方 /	➡➡️ /両方 /
CloudFlareページ		リンク	✅	➡➡️ /ファイル	➡➡️ /ファイル	➡➡️ /folder /	✅	➡➡️ /folder /	✅	✅	➡➡️ /両方	➡➡️ /両方 /
与える		リンク	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Azure Static Webアプリ		リンク	✅	➡➡️ /ファイル	✅	✅	✅	✅	✅	✅	✅	✅

従業員求む

このリソースを最新の状態に保ち、一緒に徹底的にしましょう。