nuxt generateで動的ルーティングで生成したページで、リロードするとエラーが起こってしまう

Question

前提・実現したいこと

開発環境
Nuxt.js
HeadlessCMS(microCMS)
Firebase
でCMSのWebサイトを作っています。

発生している問題・エラーメッセージ

nuxt generateで動的ルーティングで生成したページで、リロードするとエラーが起こってしまいまう。

Comments

[kai0310]

該当するコードを提示してください。

Answer 1

詳細な情報がないので、断定は出来ませんが、末尾スラッシュの統一をしていないため、リロードした際、/が付与され、正しくページが表示されないことが原因かもしれません。以前僕も末尾スラッシュを統一していなかった所為でリロードするとjsファイルが正常に読み込めなくなっていました。

以下の処理を施したら正常に動くようになりました。

Step1

以下redirect.jsをmiddlewareフォルダに追加

export default function({ route, redirect }) {
    const path = route.path
    const hash = route.hash
    const type = route.query.type
    if (path.slice(-1) !== '/' && path !== '/404') {
      if (hash) {
        redirect(301, path + '/#' + hash)
      } else if (type) {
        redirect(301, path + '/?type=' + type)
      } else {
        redirect(301, path + '/')
      }
    }
  }

Step2

nuxt.config.jsに以下を追加

  router: {
    trailingSlash: true,
    middleware: ['redirect'],
  }

こちらの記事よりコードを拝借しています。
https://qiita.com/too/items/1b0944f5acb2aeb4e9b9