GitHub PagesでVue/React/Svelteアプリが404エラーを起こす問題の解決方法


  1. ビルド設定の確認: GitHub Pagesでは、デフォルトでは静的なHTMLファイルのみをサポートしています。Vue、React、Svelteのアプリケーションは、ビルドプロセスを経て静的なHTML、CSS、JavaScriptファイルに変換されます。まずは、ビルド設定が正しく行われているか確認しましょう。各フレームワークには、ビルドコマンドや設定ファイルがありますので、公式のドキュメントを参照してください。

  2. ルーティングの問題: 404エラーが発生する場合、ルーティングの設定が正しく行われていない可能性があります。Vue Router、React Router、Svelte Routerなど、各フレームワークにはルーティング機能が組み込まれています。アプリケーションのルーティング設定を確認し、GitHub Pages上で正しく機能するように調整する必要があります。

  3. ベースパスの設定: VueやReact、Svelteのアプリケーションは、デフォルトではルートパス(/)をベースにして動作します。しかし、GitHub Pagesではリポジトリ名を含むサブディレクトリでホスティングされるため、ベースパスの設定が必要です。Vueの場合、vue-routerbaseオプションを設定します。Reactでは、BrowserRouterbasenameプロパティを設定します。Svelteでは、svelte-spa-routerbasepathオプションを設定します。

  4. ビルドディレクトリの指定: ビルドしたアプリケーションのファイルをGitHub Pagesにデプロイする際に、ビルドディレクトリが正しく指定されているか確認してください。一般的には、ビルドコマンドによって生成されるdistbuildなどのディレクトリが使用されます。GitHub Pagesのリポジトリ設定で、正しいビルドディレクトリを指定する必要があります。