4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue-routerでSPAにした際のapache(.htaccess)設定の覚書

Last updated at Posted at 2022-03-06

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の再起動も忘れずに)

備忘録デシタ。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?