Shared Options

alias

• Type:Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

  Will be passed to @rollup/plugin-alias as its entries option. Can either be an object, or an array of { find, replacement } pairs.

  When aliasing to file system paths, always use absolute paths. Relative alias values will be used as-is and will not be resolved into file system paths.

  More advanced custom resolution can be achieved through plugins.

define

• Type: Record<string, string>

  Define global variable replacements. Entries will be defined as globals during dev and statically replaced during build.

plugins

• Type: (Plugin | Plugin[])[]

  Array of plugins to use. See Plugin API for more details on Vite plugins.

root

• Type: string

• Default: process.cwd()

  Project root directory. Can be an absolute path, or a path relative from the location of the config file itself.

  See Project Root for more details.

mode

• Type: string

• Default: 'development' for serve, 'production' for build

  Specifying this in config will override the default mode for both serve and build. This value can also be overridden via the command line --mode option.

  See Env Variables and Modes for more details.

css.modules

• Type:

  interface CSSModulesOptions {
    scopeBehaviour?: 'global' | 'local'
    globalModulePaths?: string[]
    generateScopedName?:
      | string
      | ((name: string, filename: string, css: string) => string)
    hashPrefix?: string
    /**
     * default: 'camelCaseOnly'
     */
    localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
  }

  Configure CSS modules behavior. The options are passed on to postcss-modules.

css.preprocessorOptions

• Type: Record<string, object>

  Specify options to pass to CSS pre-processors. Example:

  export default {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `$injectedColor: orange;`
        }
      }
    }
  }

esbuild

• Type: ESBuildOptions | false

  ESBuildOptions extends ESbuild’s own transform options. The most common use case is customizing JSX:

  export default {
    esbuild: {
      jsxFactory: 'h',
      jsxFragment: 'Fragment'
    }
  }

  By default, ESBuild is applied to ts, jsx and tsx files. You can customize this with esbuild.include and esbuild.exclude, both of which expects type of string | RegExp | (string | RegExp)[].

  In addition, you can also use esbuild.jsxInject to automatically inject JSX helper imports for every file transformed by ESBuild:

  export default {
    esbuild: {
      jsxInject: `import React from 'react'`
    }
  }

  Set to false to disable ESbuild transforms.

assetsInclude

• Type: string | RegExp | (string | RegExp)[]

• Related: Asset Handling

  Specify additional file types to be treated as static assets so that:

  • They will be excluded from the plugin transform pipeline when referenced from HTML or directly requested over fetch or XHR.

  • Importing them from JS will return their resolved URL string (this can be overwritten if you have a enforce: 'pre' plugin to handle the asset type differently).

  The built-in asset type list can be found here.

dedupe

• Type: string[]

  If you have duplicated copies of the same dependency in your app (likely due to hoisting or linked packages in monorepos), use this option to force Vite to always resolve listed dependencies to the same copy (from project root).

logLevel

• Type: 'info' | 'warn' | 'error' | 'silent'

  Adjust console output verbosity. Default is 'info'.

clearScreen

• Type: boolean

• Default: true

  Set to false to prevent Vite from clearing the terminal screen when logging certain messages. Via command line, use --clearScreen false.