Nuxt3 での static page の生成には nuxi generate を使う

Overview

タイトルの通りですが、Nuxt3 で静的ページの機能しか使っていないケースにおいては nuxi build じゃなくて nuxi generate を使おうね、という話です。

Firebase とのかみ合わせの問題

Firebase Hosting でページをホストしてる場合、Hosting 側で指定する公開ディレクトリ（public) に生成された静的なコンテンツを入れて置かなければならないのですが、ここに index.html が存在する必要ありますが、 nuxi build は nuxtConfig の設定関係なく SSR 前提の生成物しか吐き出しません（というか nuxi build + nuxi start = nuxi dev みたいなものです。）

nuxtConfig の設定を反映して SSR、CSR それぞれに対応した成果物を生成してくれるコマンドは nuxi generate になります。

Firebase Hosting を使ってる場合は上記の通り index.html が生成されている必要があるので nuxi generate を基本的に使おうね、ということになります。

とはいえ

実はこれ、nuxt3 のプロジェクトを作ると自動生成される README に書いてあります。

# 略
# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

久しぶりに Nuxt 触ると色々忘れてる....。