【Nuxt.js】buildとgenerateの違い
一見同じような機能に見えるのですが,混同するとデプロイするときとかに遠回りすることがあるので少し整理してみたいと思います.
build
nuxt.config.json ではデフォルトの target: 'server'
が設定されているときに,npm run build
を実行することで project/.nuxt/dist
以下にファイルが生成されます.
それらのファイルは Webpack によって本番環境用に JS や CSS が圧縮されています.
Heroku や Digital Ocean などの Node.js サーバにデプロイするときに使うコマンドです.
generate
nuxt.config.json で target: 'static'
が設定されているときに,npm run generate
を実行することで project/dist
(Nuxt 3 では、project/.output
)以下にファイルが生成されます.
アプリケーションをビルドするだけでなく,すべてのルートの HTML ファイルを生成し,静的なホスティングサイトを作ることができます.
Netlify や Vercel,Firebase Hosting などのホスティングサービスにデプロイするときに使うコマンドです.
generate 先はデフォルトで dist ディレクトリになっていますが,nuxt.config.json 内で変更可能です.
例えば,Firebase Hosting のデフォルト設定に合わせるのであれば public ディレクトリがデプロイされるため,Firebase Hosting のデプロイするディレクトリを dist に変更するか,Nuxt.js の generate 設定を以下のように変更することで対応できます.
nuxt-config.js
{
generate: {
dir: 'public'
}
}