I created a project template using vite.
Under package.json, I saw this;
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
What's the difference between vite and vite preview? When should one use vite instead of vite preview?
dev starts a local web server with HMR for development
build builds the project, and outputs to the folder ./dist
preview start a local web server that serves the built solution from ./dist for previewing
Accordig to vite documentation itself:
vite#Start Vite dev server in the current directory. Will enter the watch mode in development environment and run mode in CI automatically.
...
vite preview#Locally preview production build.
In short words, vite is for running a dev server on your computer, while vite preview is for running an already built app as a preview of the production build.
Vite is a build tool that enables faster development by re-compiling only the changed files on each save, and using a simple development server that supports hot module replacement (HMR).
Vite preview is a CLI utility that can be used to preview Vite projects in a production-like environment. It builds the project, starts a production server, and opens a browser to the server URL.
According to the Vite documentation, vite is a command that starts a dev server in the current directory, while vite preview is a command that locally previews the production build. In other words, vite is for developing your project with features like hot module replacement (HMR), while vite preview is for testing your project after you have built it with vite build
Here the help pages of the vite CLI for version 4.3.8 as they seem to be hosted nowhere else:
vite --helpvite/4.3.8
Usage:
$ vite [root]
Commands:
[root] start dev server
build [root] build for production
optimize [root] pre-bundle dependencies
preview [root] locally preview production build
For more info, run any command with the `--help` flag:
$ vite --help
$ vite build --help
$ vite optimize --help
$ vite preview --help
Options:
--host [host] [string] specify hostname
--port <port> [number] specify port
--https [boolean] use TLS + HTTP/2
--open [path] [boolean | string] open browser on startup
--cors [boolean] enable CORS
--strictPort [boolean] exit if specified port is already in use
--force [boolean] force the optimizer to ignore the cache and re-bundle
-c, --config <file> [string] use specified config file
--base <path> [string] public base path (default: /)
-l, --logLevel <level> [string] info | warn | error | silent
--clearScreen [boolean] allow/disable clear screen when logging
-d, --debug [feat] [string | boolean] show debug logs
-f, --filter <filter> [string] filter debug logs
-m, --mode <mode> [string] set env mode
-h, --help Display this message
-v, --version Display version number
vite build --helpvite/4.3.8
Usage:
$ vite build [root]
Options:
--target <target> [string] transpile target (default: 'modules')
--outDir <dir> [string] output directory (default: dist)
--assetsDir <dir> [string] directory under outDir to place assets in (default: assets)
--assetsInlineLimit <number> [number] static asset base64 inline threshold in bytes (default: 4096)
--ssr [entry] [string] build specified entry for server-side rendering
--sourcemap [output] [boolean | "inline" | "hidden"] output source maps for build (default: false)
--minify [minifier] [boolean | "terser" | "esbuild"] enable/disable minification, or specify minifier to use (default: esbuild)
--manifest [name] [boolean | string] emit build manifest json
--ssrManifest [name] [boolean | string] emit ssr manifest json
--force [boolean] force the optimizer to ignore the cache and re-bundle (experimental)
--emptyOutDir [boolean] force empty outDir when it's outside of root
-w, --watch [boolean] rebuilds when modules have changed on disk
-c, --config <file> [string] use specified config file
--base <path> [string] public base path (default: /)
-l, --logLevel <level> [string] info | warn | error | silent
--clearScreen [boolean] allow/disable clear screen when logging
-d, --debug [feat] [string | boolean] show debug logs
-f, --filter <filter> [string] filter debug logs
-m, --mode <mode> [string] set env mode
-h, --help Display this message
vite optimize --helpvite/4.3.8
Usage:
$ vite optimize [root]
Options:
--force [boolean] force the optimizer to ignore the cache and re-bundle
-c, --config <file> [string] use specified config file
--base <path> [string] public base path (default: /)
-l, --logLevel <level> [string] info | warn | error | silent
--clearScreen [boolean] allow/disable clear screen when logging
-d, --debug [feat] [string | boolean] show debug logs
-f, --filter <filter> [string] filter debug logs
-m, --mode <mode> [string] set env mode
-h, --help Display this message
vite preview --helpvite/4.3.8
Usage:
$ vite preview [root]
Options:
--host [host] [string] specify hostname
--port <port> [number] specify port
--strictPort [boolean] exit if specified port is already in use
--https [boolean] use TLS + HTTP/2
--open [path] [boolean | string] open browser on startup
--outDir <dir> [string] output directory (default: dist)
-c, --config <file> [string] use specified config file
--base <path> [string] public base path (default: /)
-l, --logLevel <level> [string] info | warn | error | silent
--clearScreen [boolean] allow/disable clear screen when logging
-d, --debug [feat] [string | boolean] show debug logs
-f, --filter <filter> [string] filter debug logs
-m, --mode <mode> [string] set env mode
-h, --help Display this message
