👻 Nuxt.jsをレンタルサーバーで動かしていると下層のページでリロードした時に404になる

2021-03-05 /Development

この記事は最終更新日から3年以上経過しています。

お仕事でNuxt.jsを使ったアプリを作成していて、お客さんのところに確認用のサーバーが無かったので取り急ぎ自分のサーバーに上げて動かしてみていて、表題の通り下層のページを表示する事ができなかったのですが（仕組みを考えるとそりゃそうだよねってなりますね）、色々試してみた中で一番良さそうだった解決方法を自分用の修正と合わせてメモ。

結論からいうと https://gist.github.com/orimajp/2541a8cde9abf3a925dffd052ced9008 に記載されている内容を使わせていただいたら解決しました。

ただ自分の場合Github Pagesではなくてレンタルサーバーだったのでそのままでは動かず、404へのリダイレクトの設定などをちょっとだけ書き足しました。

layaouts/redirect.vue:

コピーしました
<template>
  <nuxt />
</template>

pages/redirect.vue:

コピーしました
<template>
  <div></div>
</template>

<script>
export default {
  layout: 'redirect',
  fetch({base, redirect, query}) {
    const param = query.p
    if (param === undefined) {
      return redirect('/')
    }
    const redirectPath = '/' + param.replace(base, '')
    return redirect(redirectPath)
  }
}
</script>

static/404.html:

コピーしました
<html>
<head>
  <script>
    var pathName = window.location.pathname;
    var redirectPath = '/redirect';
    location.href = redirectPath + '?p=' + encodeURI(pathName);
  </script>
</head>
</html>

nuxt.config.js:

コピーしました
generate: {
  fallback: true
},

.htaccess:

コピーしました
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^404\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /404.html [L]
</IfModule>

これで大丈夫でした。

存在しないURLにアクセスした時の404ページは別途vueで作成して、extendRoutesを使用して表示させるようにしたら併用する事ができました。