Vue.jsで製造されたサイトでRouter設定を利用している際、サーバーによってはアクセスしたURLが正しく表示されず、Not Foundになる場合があります、今回はのNot Foundになる場合の対処方法を紹介します。

Vue.js とは？

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

詳細は「https://jp.vuejs.org」で確認できます。2022年3月時点で最新版であるv3は「https://v3.ja.vuejs.org」

Router設定とは？

パラメータを含めたURLにアクセスすると、任意のページを表示する設定です。

https://hoge.com ：トップページを表示

https://hoge.com/about ：aboutページを表示

about用のhtmlファイルは存在せず設定したRouterに従ってaboutページを出力しています。

Not Foundになる場合の対処方法

Router設定を行なったVue.jsで、https://hoge.com/は正常に出力されるが、https://hoge.com/aboutに直接アクセスするとNot Foundになるといった現象が起きます。

/aboutには実態がないのでNot Foundは正常なのですが、Router設定を行なっているため、通常は/aboutのページが出力されるはずですがRouter設定が読み込まれていないためNot Foundとなってしまいます。

これを解消するには「mod_rewrite」を利用します。

公開ディレクトリ直下に.htaccessを作成し、下記の内容を記述し保存します。

これで、https://hoge.com/aboutに直接アクセスした際正常に/aboutのページが出力される様になります。

.htaccessの詳細

RewriteEngine On

RewriteEngine（置換エンジン）をオンにする

RewriteBase /

置換後のベースパスを / に設定

RewriteRule ^index\.html$ – [L]

置換前のパスがindex.htmlと完全一致したらそれ以上置換を行わない

RewriteCond %{REQUEST_FILENAME} !-f、RewriteCond %{REQUEST_FILENAME} !-d

置換前のパスが実ファイルでも実ディレクトリでもない場合

RewriteRule . /index.html [L]

換前の文字列を/index.htmlに変換