お名前ドットコムでVue.jsをホスティングしたときの404対応

どうも、焼き鳥は基本タレ派のざわです。

お名前ドットコムでVue.jsで作ったページを運用したとき、
普通にRouterからURL飛ばすと404ページに飛ばされたので解決方法です。

まず解決方法

.htaccessファイルに以下を追加

ErrorDocument 404 /index.html

以上。Vue.js以外の他のSPAフレームワークでも同じようになるのかなと思います。

現象

例えば以下のようなRouterを設定するとします

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App.vue'
import Hoge from './components/Hoge.vue'
import PageNotFound from './components/PageNotFound.vue'

Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: App },
    { path: '/hoge', component: Hoge },
    { path: '*', component: PageNotFound }
 ]
})

このとき/へのアクセスはうまくいったのですが、
/hogeへアクセスした時に404エラーとなりました。

結果

上記の解決方法の設定をした結果、期待通りの動作となりました。
また、適当なURLへとんでもRouterで設定したPageNotFoundページへ飛ぶようになりました。
↓はブログ用に作った簡単なものです

おしまい

何かのお役に立てばと思います

サーバサイドエンジニア。オムライスが好物

シェアする

  • このエントリーをはてなブックマークに追加

フォローする