Nuxt.jsでgenerate時に動的ルーティングページのNotFoundエラーへの対応
Nuxt.jsで静的ページとしてアプリケーションを配信するときはgenerateモードでビルドすることで、個別のHTMLファイルとjavascriptファイルとして生成されます。ただし、ルーティングが動的に生成されている場合には、個別のHTMLとして生成されないため、直接URLを叩いてアクセスしたり、ページをリロードした場合にはNotFoundとして404エラーが返されてしまいます。
公式のドキュメントを見ると、「generate コマンドでは 動的なルーティング は無視されます。」と記載されており、どうやら対応が必要だそうです。動的ルーティングが発生するケースはどういった時かというと、下記のようなルーティングの構成で、「_id.vue」というファイルを使うことでURLのパスが変わるケースになります。
pages ┣ index.vue ┣ page-01 ┗ index.vue ┣ page-02 ┗ index.vue ┗ posts ┗ _id.vueこの場合に、そのままgenerateコマンドを実行すると、distフォルダに生成されるファイル群は下記のようになります。
// 一部抜粋 dist ....... ┣ _nuxt ┣ index.html ┣ page-01 ┗ index.html ┣ page-02 ┗ index.html動的にルーティングされているページに関しては、ファイルが生成されないようです。そこで下記のように「nuxt.config.js」ファイルへの設定を行う必要があります。 【nuxt.config.js】※一部抜粋
export default { ....... generate: { routes: [ '/posts/post-01', '/posts/post-02', '/posts/post-03', '/posts/post-04', ....... ] } ....... }「generateプロパティ」の「routes」の値に配列の形でルーティングを追記していきます。こうすることで動的なルーティングでも個別ファイルとして生成することができます。実際にgenerateコマンドを実行すると、動的なルーティングで表示されるページも個別ファイルとして書き出されているのが確認できます。
// 一部抜粋 dist ....... ┣ _nuxt ┣ index.html ┣ page-01 ┗ index.html ┣ page-02 ┗ index.html ┣ posts ┣ post-01 ┗ index.html ┣ post-02 ┗ index.html ┣ post-03 ┗ index.html .......公式ドキュメントにはきちんと記載されているのですが、知らないと結構悩むのではないでしょうか、、やはりわからないことがあるとまずは公式ドキュメントに目を通すのが大事だと改めて思いましたね。 (参考にさせて頂いたサイト) Nuxt.js generate プロパティ
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories