Vite
Refs
What is vite ?
- Vite is a modern web project build tool, consists of two major parts:
- A dev server that provides rich feature enhancements over native ES modules, for example super fast HMR.
- A build command that bundles your code with Rollup, pre-configured to output high optimized static assets for production.
- Vite is highly extensible via its Plugin API and Javascript API with full typing support.
Why Vite ?
Vite commands
Command | Description |
---|---|
vite |
Start dev server with HMR, aliases: vite dev , vite serve . |
vite build |
Build for production, files are output to ./dist . |
vite preview |
Locally preview production build, start a local web server serving built app from ./dist . |
Modes
Dev server runs dev
(default) in development
mode and runs build
in production
mode, which means dev
reads variables from .env.dev
and build
reads variables from .env.production
.
Example:
1 | VITE_APP_TITLE=My App |
In the app, render title with import.meta.env.VITE_APP_TITLE
.
Configuring Vite
When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js
inside project root.
1 | // vite.config.js |
If config needs to conditionally determine options based on the mode, or if it is an SSR build (ssrBuild), export a function instead:
1 | export default defineConfig( ({command, mode, ssrBuild}) => { |