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

Viewed 4926

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?

2 Answers

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

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.

Related