vite
Develop and build modern web applications
TLDR
Setup using npm 6.x
Setup using npm 7+, extra double-dash is needed
Setup using yarn
Setup using pnpm
SYNOPSIS
vite [options] [
PARAMETERS
-c, --config
Use specified config file instead of vite.config.js or vite.config.ts
-r, --root
Use specified root directory as project root (default: cwd)
-m, --mode
Set mode. Default: development or production.
-l, --logLevel
Adjust console output verbosity (info | warn | error | silent). Default: info
--clearScreen
Clear the console when logging messages.
--debug [feat]
Show debug logs. Optional features: 'hmr', 'config'.
-f, --filter
Filter modules to debug.
-d, --define
Define globally accessible constants as environment variables.
--force
Force the optimizer to ignore the cache and re-bundle.
--host [host]
Specify hostname or IP address to listen on. Default: localhost.
--port
Specify server port. Default: 5173.
--https
Enable TLS + HTTP/2.
--open [path]
Automatically open the app in the browser on server start. Optionally specify a path to open.
--cors
Configure CORS for the dev server.
--strictPort
Exit if port is already in use, instead of retrying.
--hmr [options]
Disable or configure HMR connection (options: { protocol, host, port, timeout, overlay }).
--profile
Enable the profiler.
-h, --help
Display help for command
DESCRIPTION
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server that provides rich feature enhancements over native ES modules, for example, extremely fast Hot Module Replacement (HMR). And a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
Vite leverages native ES modules and esbuild, providing a significantly faster cold start and near-instant updates. It's designed to handle large and complex projects efficiently, with a focus on modern JavaScript frameworks like Vue, React, and Svelte. Instead of bundling the entire application for every change, Vite serves source code via native ES modules and only transforms modules that are actually requested by the browser. This approach significantly reduces the time spent waiting for updates during development.
CAVEATS
Vite relies heavily on modern browser features, so older browsers might not be fully supported without specific configuration. Configuration via `vite.config.js` or `vite.config.ts` is central to customizing Vite's behavior.
CONFIGURATION FILES
Vite projects are typically configured using a `vite.config.js` or `vite.config.ts` file in the project root. This file allows you to customize various aspects of the build process, including plugins, server settings, and build targets. You can configure your build settings, define aliases and add plugins in the config file.
PLUGINS
Vite uses a plugin system similar to Rollup and Webpack. Plugins can extend Vite's functionality by providing features like TypeScript support, CSS pre-processing, and asset optimization. Many official and community plugins are available.
HISTORY
Vite was created by Evan You, also the creator of Vue.js. It was born out of the need for faster development tooling for Single Page Applications (SPAs). Prior to Vite, development workflows often involved slow build processes and long waiting times for code updates. Vite's initial release was aimed at significantly improving the developer experience by leveraging native ES modules and modern JavaScript features.