0%

Programmingプログラミングナレッジ

Posted:2019.09.22

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 プロパティ

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】