【Nuxt.js】buildとgenerateの違い

2024-02-18
2020-11-02

一見同じような機能に見えるのですが,混同するとデプロイするときとかに遠回りすることがあるので少し整理してみたいと思います.

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'
  }
}