Config File

Config File Resolving

When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project root.

The most basic config file looks like this:

  1. // vite.config.js
  2. export default {
  3.   // config options
  4. }

Note Vite supports using ES modules syntax in the config file even if the project is not using native Node ESM via type: "module". In this case the config file is auto pre-processed before load.

You can also explicitly specify a config file to use with the --config CLI option (resolved relative to cwd):

  1. vite --config my-config.js

Config Intellisense

Since Vite ships with TypeScript typings, you can leverage your IDE’s intellisense with jsdoc type hints:

  1. /**
  2.  * @type {import('vite').UserConfig}
  3.  */
  4. const config = {
  5.   // ...
  6. }
  8. export default config

Alternatively you can use the defineConfig helper which should provide intellisense without the need for jsdoc annotations:

  1. import { defineConfig } from 'vite'
  3. export default defineConfig({
  4.   // ...
  5. })

Vite also directly supports TS config files. You can use vite.config.ts with the defineConfig helper as well.

Conditional Config

If the config needs to conditional determine options based on the command (serve or build) or the mode being used, it can export a function instead:

  1. export default ({ command, mode }) => {
  2.   if (command === 'serve') {
  3.     return {
  4.       // serve specific config
  5.     }
  6.   } else {
  7.     return {
  8.       // build specific config
  9.     }
  10.   }
  11. }

Async Config

If the config needs to call async function, it can export a async function instead:

  1. export default async ({ command, mode }) => {
  2.   const data = await asyncFunction();
  3.   return {
  4.     // build specific config
  5.   } 
  6. }