すべて 公式のドキュメント に書いてあることなので、わざわざまとめるほどのことでもないのですが、せっかく調べたのでまとめておきます。
nuxt generateとは
nuxt generateコマンドは静的なウェブアプリケーションを書き出すコマンドです。
ざっくり言えば、HTMLファイルと、JavaScriptを生成してくれます。
SPAをサーバにデプロイするときは、全てのURLでindex.htmlを返す設定をする必要がありますが、その設定ができない場合や、SSRに耐えられるスペックじゃない場合など、静的なHTMLを書き出してからデプロイしたい場合に使われがちなコマンドです。
動的なルーティングとは
例えば、ユーザーページ。
https://kimizuka.fm/user/1
https://kimizuka.fm/user/2
のように、ユーザーIDでアクセスできるようにしたい場合があると思います。
これを実現できるのが動的なルーティングです。
Nuxt.jsの場合、
- | pages/ ---|user/ -----|_id.vue
といった具合に、_id.vueをつくると対応できます。
詳しくは公式ドキュメントを参照のこと。
nuxt generateでは動的なルーティングは無視される
nuxt generateでは動的なルーティング は無視されます。なぜならば、通常はNuxt動的なルーティングを伝えていないからです。
- | pages/ ---|user/ -----|_id.vue
この例でいうと、
- | pages/ ---|user/ -----|1/ -------|index.html -----|2/ -------|index.html -----|3/ -------|index.html -----|4/ -------|index.html -----|5/ -------|index.html
的な感じで書き出せば、静的なHTMLでも対応できますが、IDをどこまで書き出せばいいのか判断できないわけです。
そもそもIDが数字じゃない場合もありますし。
nuxt generateでは動的なルーティングを書き出す
解決方法は簡単で、nuxt.config.jsonに書き出したいルートを記載すればOKです。
export default { generate: { routes: [ '/user/1', '/user/2, '/user/3', '/user/4', '/user/5' ] } }
という感じで記載すれば、
- | pages/ ---|user/ -----|1/ -------|index.html -----|2/ -------|index.html -----|3/ -------|index.html -----|4/ -------|index.html -----|5/ -------|index.html
を書き出してくれます。
generate設定は他にもいろいろあるので、公式ドキュメントに目を通すのがおすすめです。
