Difference between build and generate in Nuxt.js

2024-02-18
2020-11-02

Although at first glance they appear to have the same function, build and generate have different roles.

build

In nuxt.config.json file, when the default parameter target: 'server' is set, running npm run build will generate files under project/.nuxt/dist.

These are minimized files of JS and CSS for use in production environment.

Use this command to deploy to Node.js server, such as Heroku, Digital Ocean, etc.

generate

In nuxt.config.json file, when the parameter target: 'static' is set, running npm run generate will generate files under project/dist (or project/.output in Nuxt 3).

HTML, CSS and JS files of all pages are generated to create a static website.

Use this command to deploy to hosting server, such as Netlify, Vercel, Firebase Hosting, etc.

You can change the name of the directory in which generated files are included.

nuxt.config.js

{
  generate: {
    dir: 'public'
  }
}