CODEWITHSUNDEEP
javascriptvue.jsvite
user3848207
user3848207

Reputation: 4977

What is the difference between "vite" and "vite preview"?

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?

Upvotes: 154

Views: 76958

Answers (5)

tauzN
tauzN

Reputation: 7021

npm run dev (or vite) starts a local web server with Hot Module Replacement for development, and will automatically change when code changes

npm run build (or vite build) builds the project, and outputs to the folder ./dist

npm run preview (or vite preview) start a local web server that serves the built solution from ./dist for previewing

Beware

  • You need to run build before preview.

  • Preview will always preview the latest build, and will not update automatically when code changes.

Upvotes: 249

cachius
cachius

Reputation: 1905

Here is the terse output of vite --help and subcommands as of mid 2023. Note the compact Commands section at the top, which then was not present in the CLI docs (src).

vite --help

vite/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 --help

vite/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 --help

vite/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 --help

vite/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

Upvotes: -4

Banushan
Banushan

Reputation: 79

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

Upvotes: 4

David Brito
David Brito

Reputation: 141

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.

Upvotes: 12

Goal Moal
Goal Moal

Reputation: 136

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.

Upvotes: -3

Related Questions