Vue Routerでリロード時にNot Found(404)エラーが発生する問題

雑記

posted: 2023/09/28
update: 2023/11/15

環境：Vue + Vite + Vue Router + Typescript

この問題で調べてよく出てくるmod_rewriteで対応する方法を試したらトップページはIt Works!になり、他のページはForbidden(403)になってしまった。
参考：公式ドキュメント

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

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

多分router/index.tsのhistoryの記載がhistory: createWebHistory(import.meta.env.BASE_URL)だったせいな気がする。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
      //割愛
  ]
})

下記を.htaccessに記載したら問題なくアクセスできてリロードでも表示できた。

<IfModule mod_dir.c>
  FallbackResource /index.html
</IfModule>

参考にした記事：https://hasethblog.com/it/programming/vue/7591/
mod_rewrite以外で解決する方法の記事が上記くらいしか出てこなかったので、ありがとうございました。

▼ SNSでこの記事をシェア

Blog..

Vue Routerでリロード時にNot Found(404)エラーが発生する問題