Difference between build and generate in Nuxt.js
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'
}
}