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

2021-03-05 #Development

お仕事で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を使用して表示させるようにしたら併用する事ができました。

comments powered by Disqus
Profile
😛

石原 悠 / Yu Ishihara

デザインとプログラミングとヨーグルト作りが好きです。