Vue-routerでSPAにした際のapache（.htaccess）設定の覚書 #SPA

vue-routerを使ってSPAをリモートサーバにデプロイしてみたところ、
ローカルでは問題なかったページリロードで404が返り、「？？」となりました。

調べてみたところ、公式に設定方法が記載されていたので、
https://router.vuejs.org/guide/essentials/history-mode.html#html5-mode
設定しようとして、少しハマりましたので備忘録残します。

CentOS8環境上のapacheで、まず、httpd.confの記述で少しハマりました。

<Directory /var/www/dir>
  AllowOverride All
</Directory>

をまず設定してやることが必要でした。.htaccessの適用のために。（その他のオプションは割愛）
また、/var/www/dirの部分は、公開ディレクトリルート設定なので、環境に合わせて変える必要があります。

まずここがハマりどころでした。

次に、肝心の.htaccessの内容は、公式にある以下のような記述でとりあえずOKでした。
これで直接ページにアクセスしても404にならなくなってよかった。

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

あとはSPAと直接関係ないですが、ついでに、.htpasswdでパスワード保護などもかけてみました。
一緒に.htaccessで手軽に設定できたのでよかったよかった。
(httpdの再起動も忘れずに)

備忘録デシタ。