vite.config.js uses defineConfig for better type inference and IDE support, supports conditional configuration based on command or mode, and can be async for dynamic configuration loading
Vite's configuration file, typically vite.config.js (or .ts), is the central place to customize the build tool's behavior. The config file can export an object, a function returning an object, or an async function returning a promise. Vite provides the defineConfig helper primarily for TypeScript users to get better type inference and IDE autocompletion, but it's also useful in JavaScript projects for documentation purposes. The configuration system is designed to be flexible, supporting conditional logic based on the current command (serve or build) and environment mode (development, production, etc.), as well as dynamic configuration loading through async functions .
The config file can export a function that receives the current command as an argument, allowing different configurations for development server and production build. This is useful for applying different plugins or settings based on whether you're running vite (serve) or vite build. The command parameter will be 'serve' during dev and 'build' during production builds .
Vite modes (development, production, or custom modes) provide another dimension for conditional configuration. The mode can be accessed from the config function parameters, and you can use it to load different environment variables, apply specific plugins, or adjust build options based on the target environment .
Vite supports async configuration for cases where configuration needs to be fetched dynamically—for example, loading from a remote source, reading files, or performing async operations before determining settings. The async config function should return the configuration object (or a promise resolving to it) .
Parameters: The config function receives an object with
command(string),mode(string), andssrBuild(boolean) properties .Return type: Can be a plain config object, a Promise resolving to a config object, or an array of such (for multi-project configs) .
Type safety:
defineConfigworks with both object and function forms, maintaining type inference across all variations .
When using TypeScript for configuration, Vite provides the defineConfig function that properly infers types. You can also use UserConfig and UserConfigExport types directly. The config file can be named vite.config.ts and Vite will handle TypeScript compilation automatically using ts-node or esbuild .