Opciones compartidas

root

Tipo: string
Por defecto: process.cwd()

Directorio raíz del proyecto (donde se encuentra index.html). Puede ser una ruta absoluta o una ruta relativa a la ubicación al directorio de trabajo actual.

Consulta Raíz del proyecto para obtener más detalles.

base

Tipo: string
Por defecto: /
Relacionado: server.origin

Ruta pública base cuando se sirve en desarrollo o producción. Los valores válidos incluyen:

Nombre de ruta absoluta URL, ejemplo, /foo/
URL completa, por ejemplo, https://bar.com/foo/ (La parte del origen no se utilizará en el desarrollo asi que el valor es el mismo que /foo/)
Cadena vacía o ./ (para implementación incrustada)

Consulta Ruta base pública para obtener más detalles.

mode

Tipo: string
Por defecto: 'development' para serve, 'production' para build

Especificar esto en la configuración sobreescribe el modo predeterminado para serve y build. Este valor también se puede sobreescribir a través de la opción --mode de la línea de comando.

Consulta Modos y variables de entorno para obtener más detalles.

define

Tipo: Record<string, any>

Define constantes globales de reemplazo. Las entradas se definirán como globales durante el desarrollo y se reemplazarán estáticamente durante la compilación.

Vite usa esbuild define para realizar reemplazos, por lo que las expresiones de valor deben ser una cadena que contenga un valor serializable JSON (null, boolean, number, string, array, u object) o un único identificador. Para valores que no son cadenas, Vite los convertirá automáticamente en una cadena con JSON.stringify.

Ejemplo:

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
})

NOTA

Para usuarios de TypeScript, asegúrense de agregar las declaraciones de tipo en el archivo env.d.ts o vite-env.d.ts para obtener comprobaciones de tipos e Intellisense.

plugins

Tipo: (Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]

Array de complementos a usar. Los complementos falsos se ignoran y los arrays de complementos se simplifican. Si se devuelve una promesa, se resolvería antes de ejecutarse. Consulta la API de complementos para obtener más detalles sobre los complementos de Vite.

publicDir

Tipo: string | false
Por defecto: "public"

Directorio para servir recursos estáticos simples. Los archivos en este directorio se sirven en / durante el desarrollo y se copian en la raíz de outDir durante la compilación, y siempre se sirven o copian tal cual sin transformación. El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto.

Definir publicDir como false deshabilita esta característica.

Consulta La carpeta public para obtener más detalles.

cacheDir

Tipo: string
Por defecto: "node_modules/.vite"

Directorio para guardar archivos de caché. Los archivos en este directorio son dependencias preempaquetadas o algunos otros archivos de caché generados por vite, que pueden mejorar el rendimiento. Puedes usar el indicador --force o eliminar manualmente el directorio para regenerar los archivos de caché. El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto. Por defecto a .vite cuando no se detecta ningún package.json.

resolve.alias

Tipo:Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

Se pasará a @rollup/plugin-alias como su opción de entradas. Puede ser un objeto o un array de pares {find, replacement, customResolver}.

Cuando crees alias en las rutas del sistema de archivos, utiliza siempre rutas absolutas. Los valores de alias relativos se utilizarán tal cual y no se resolverán en rutas del sistema de archivos.

Se puede lograr una resolución personalizada más avanzada a través de complementos.

Uso con SSR

Si has configurado alias para dependencias externalizadas de SSR, es posible que desees crear un alias para los paquetes node_modules reales. Tanto Yarn como pnpm admiten la creación de alias a través del prefijo npm:.

resolve.dedupe

Tipo: string[]

Si tienes copias duplicadas de la misma dependencia en tu aplicación (probablemente debido a hoisting o paquetes vinculados en monorepos), usa esta opción para obligar a Vite a resolver siempre las dependencias enumeradas en la misma copia (desde la raíz del proyecto).

SSR + ESM

Para compilaciones de SSR, la deduplicación no funciona para las salidas de compilación de ESM configuradas desde build.rollupOptions.output. Una solución consiste en utilizar las salidas de compilación de CJS hasta que ESM tenga una mejor compatibilidad con complementos para la carga de módulos.

resolve.conditions

Tipo: string[]

Condiciones adicionales permitidas al resolver las exportaciones condicionales desde un paquete.

Un paquete con exportaciones condicionales puede tener el siguiente campo exports en su package.json:

json

{
  "exports": {
    ".": {
      "import": "./index.esm.js",
      "require": "./index.cjs.js"
    }
  }
}

Aquí, import y require son "condiciones". Las condiciones se pueden anidar y deben especificarse de la más a la menos específica.

Vite tiene una lista de "condiciones permitidas" y coincidirá con la primera condición que está en la lista permitida. Las condiciones permitidas por defecto son: import, module, browser, default y production/development dependiendo del modo actual. La opción de configuración resolve.conditions permite especificar condiciones adicionales permitidas.

Resolviendo exportaciones de rutas secundarias

Las claves de exportación que terminan en "/" están obsoletas en Node y es posible que no funcionen bien. Comunícate con el autor del paquete para usar patrones de subruta * en su lugar.

resolve.mainFields

Tipo: string[]
Por defecto: [''browser', 'module', 'jsnext:main', 'jsnext']

Lista de campos en package.json para probar al resolver el punto de entrada de un paquete. Ten en cuenta que esto tiene menos prioridad que las exportaciones condicionales resueltas desde el campo exports: si un punto de entrada se resuelve con éxito desde exports, el campo principal se ignorará.

resolve.extensions

Tipo: string[]
Por defecto: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

Lista de extensiones de archivo para probar las importaciones que omiten extensiones. Ten en cuenta que NO se recomienda omitir extensiones para tipos de importación personalizados (p. ej., .vue), ya que puede interferir con el IDE y la compatibilidad de tipos.

resolve.preserveSymlinks

Tipo: boolean
Por defecto: false

Habilitar esta configuración hace que vite determine la identidad del archivo por la ruta del archivo original (es decir, la ruta sin seguir los enlaces simbólicos) en lugar de la ruta real del archivo (es decir, la ruta después de seguir los enlaces simbólicos).

Relacionado: esbuild#preserve-symlinks, webpack#resolve.symlinks

html.cspNonce

Tipo: string
Relacionado: Política de seguridad de contenido (CSP)

Un placeholder de valor de nonce que se utilizará al generar etiquetas de script/style. Establecer este valor también generará una etiqueta meta con el valor de nonce.

css.modules

Tipo:

interface CSSModulesOptions {
  getJSON?: (
    cssFileName: string,
    json: Record<string, string>,
    outputFileName: string,
  ) => void
  scopeBehaviour?: 'global' | 'local'
  globalModulePaths?: RegExp[]
  exportGlobals?: boolean
  generateScopedName?:
    | string
    | ((name: string, filename: string, css: string) => string)
  hashPrefix?: string
  /**
   * default: undefined
   */
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | ((
        originalClassName: string,
        generatedClassName: string,
        inputFile: string,
      ) => string)
}

Configura el comportamiento de los módulos CSS. Las opciones se pasan a postcss-modules.

Esta opción no tiene ningún efecto cuando se utiliza Lightning CSS. Si está habilitada, se debe usar css.lightningcss.cssModules en su lugar.

css.postcss

Tipo: string | (postcss.ProcessOptions & { plugins?: postcss.AcceptedPlugin[] })

Configuración de PostCSS inline o un directorio personalizado para buscar la configuración de PostCSS (el valor predeterminado es la raíz del proyecto).

Para la configuración de PostCSS inline, espera el mismo formato que postcss.config.js. Pero para la propiedad plugins, solo se puede usar formato de array.

La búsqueda se realiza mediante postcss-load-config y solo se cargan los nombres de archivos de configuración admitidos.

Ten en cuenta que si se proporciona una configuración inline, Vite no buscará otras fuentes de configuración de PostCSS.

css.preprocessorOptions

Tipo: Record<string, object>

Especifica las opciones a pasar a los preprocesadores de CSS. Las extensiones de archivo se utilizan como claves para las opciones. Las opciones admitidas para cada preprocesador se pueden encontrar en su documentación respectiva:

sass/scss - la opción de nivel superior api: "legacy" | "modern" (por defecto "legacy") permite cambiar qué API de Sass usar. Opciones (legacy), Opciones (modern).
less - Opciones.
styl/stylus: solo se admite define, el cual se puede pasar como un objeto.

Ejemplo:

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      styl: {
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
    },
    scss: {
      api: 'modern', // o "legacy"
      importers: [
        // ...
      ],
    },
  },
})

css.preprocessorOptions[extension].additionalData

Tipo: string | ((source: string, filename: string) => (string | { content: string; map?: SourceMap }))

Esta opción se puede utilizar para inyectar código adicional para cada contenido de estilo. Ten en cuenta que si incluyes estilos reales y no solo variables, esos estilos se duplicarán en el paquete final.

Ejemplo:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`,
      },
    },
  },
})

css.preprocessorMaxWorkers

Experimental: Hacer comentarios
Tipo: number | true
Por defecto: 0 (no crea ningún worker y se ejecuta en el hilo principal)

Si se configura esta opción, los preprocesadores CSS se ejecutarán en los workers cuando sea posible. true significa el número de CPU menos 1.

css.devSourcemap

Experimental Hacer comentarios
Tipo: boolean
Por defecto: false

Habilita los mapas de origen durante el desarrollo.

css.transformer

Experimental Hacer Comentarios
Tipo: 'postcss' | 'lightningcss'
Por defecto: 'postcss'

Selecciona el motor utilizado para el procesamiento de CSS. Consulta Lightning CSS para obtener más información.

Duplicados de @import

Ten en cuenta que postcss (postcss-import) tiene un comportamiento diferente con los @import duplicados en comparación con los navegadores. Consulta postcss/postcss-import#462.

css.lightningcss

Experimental Hacer Comentarios
Type:

import type {
CSSModulesConfig,
Drafts,
Features,
NonStandard,
PseudoClasses,
Targets,
} from 'lightningcss'

{
targets?: Targets
include?: Features
exclude?: Features
drafts?: Drafts
nonStandard?: NonStandard
pseudoClasses?: PseudoClasses
unusedSymbols?: string[]
cssModules?: CSSModulesConfig,
// ...
}

Configura Lightning CSS. Todas las opciones de transformación completas se pueden encontrar en el repositorio de Lightning CSS.

json.namedExports

Tipo: boolean
Por defecto: true

Admite importaciones con nombre desde archivos .json.

json.stringify

Tipo: boolean
Por defecto: false

Si se coloca en true, el JSON importado se transformará en export default JSON.parse("..."), que tiene un rendimiento significativamente mayor que los objetos literales, especialmente cuando el archivo JSON es grande.

Habilitar esto deshabilita las importaciones con nombre.

esbuild

Tipo: ESBuildOptions | false

ESBuildOptions amplía las opciones de transformación propias de esbuild. El caso de uso más común es personalizar JSX:

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

De forma predeterminada, esbuild se aplica a los archivos ts, jsx y tsx. Puedes personalizar esto con esbuild.include y esbuild.exclude, que pueden ser una expresión regular, un patrón picomatch o una array de cualquier valor.

Además, también puedes usar esbuild.jsxInject para inyectar automáticamente importaciones auxiliares de JSX para cada archivo transformado por esbuild:

export default defineConfig({
  esbuild: {
    jsxInject: `import React from 'react'`,
  },
})

Cuando build.minify es true, todas las optimizaciones de minify se aplican de manera predeterminada. Para deshabilitar ciertos aspectos, configura cualquiera de las opciones esbuild.minifyIdentifiers, esbuild.minifySyntax o esbuild.minifyWhitespace en false . Ten en cuenta que la opción esbuild.minify no se puede usar para anular build.minify.

Colocarlo en false deshabilita las transformaciones de esbuild.

assetsInclude

Tipo: string | RegExp | (string | RegExp)[]
Relacionado: Gestión de recursos estáticos

Especifica patrones de picomatch adicionales para ser tratados como recursos estáticos para que:

Sean excluidos de la canalización de transformación del complemento cuando se haga referencia a ellos desde HTML o se soliciten directamente a través de fetch o XHR.
Importarlos desde JS devolverá su cadena de URL resuelta (esto se puede sobrescribir si tiene un complemento enforce: 'pre' para manejar el tipo de recursos de manera diferente).

La lista de tipos de recursos integrados se puede encontrar aquí.

Ejemplo:

export default defineConfig({
  assetsInclude: ['**/*.gltf'],
})

logLevel

Tipo: 'info' | 'warn' | 'error' | 'silent'

Ajusta la verbosidad de salida de la consola. Por defecto es 'info'.

customLogger

Tipo:

interface Logger {
  info(msg: string, options?: LogOptions): void
  warn(msg: string, options?: LogOptions): void
  warnOnce(msg: string, options?: LogOptions): void
  error(msg: string, options?: LogErrorOptions): void
  clearScreen(type: LogType): void
  hasErrorLogged(error: Error | RollupError): boolean
  hasWarned: boolean
}

Usa un registrador personalizado para registrar mensajes. Puedes usar la API createLogger de Vite para obtener el registrador predeterminado y personalizarlo para, por ejemplo, cambiar el mensaje o filtrar ciertas advertencias.

import { createLogger, defineConfig } from 'vite'
const logger = createLogger()
const loggerWarn = logger.warn
logger.warn = (msg, options) => {
  // Ignorar la advertencia de archivos CSS vacíos
  if (msg.includes('vite:css') && msg.includes(' is empty')) return
  loggerWarn(msg, options)
}
export default defineConfig({
  customLogger: logger,
})

clearScreen

Tipo: boolean
Por defecto: true

Colocalo en false para evitar que Vite borre la pantalla del terminal al registrar ciertos mensajes. A través de la línea de comandos, usa --clearScreen false.

envDir

Tipo: string
Por defecto: root

El directorio desde el que se cargan los archivos .env. Puede ser una ruta absoluta o una ruta relativa a la raíz del proyecto.

Entra aquí para obtener más información sobre los archivos de entorno.

envPrefix

Tipo: string | string[]
Por defecto: VITE_

Las variables de entorno que comienzan con envPrefix se expondrán al código fuente de tu cliente a través de import.meta.env.

NOTAS DE SEGURIDAD

envPrefix no debe configurarse como '', esto expondrá todas tus variables env y provocará una filtración inesperada de información confidencial. De todas formas, Vite arrojará un error al detectar ''.

Si deseas exponer una variable sin prefijo, puede usar define:

define: {
  'import.meta.env.ENV_VARIABLE': JSON.stringify(process.env.ENV_VARIABLE)
}

appType

Tipo: 'spa' | 'mpa' | 'custom'
Por defecto: 'spa'

Si tu aplicación es una aplicación de página única (SPA), una aplicación multipáginas (MPA) o una aplicación personalizada (SSR y marcos con manejo de HTML personalizado):

'spa': incluye el middleware de reserva de SPA y configura sirv con single: true en la vista previa
'mpa': solo incluye middleware HTML no SPA
'custom': no incluye middleware HTML

Obtén más información en la guía SSR de Vite. Relacionado: server.middlewareMode.

Opciones compartidas ​

root ​

base ​

mode ​

define ​

plugins ​

publicDir ​

cacheDir ​

resolve.alias ​

resolve.dedupe ​

resolve.conditions ​

resolve.mainFields ​

resolve.extensions ​

resolve.preserveSymlinks ​

html.cspNonce ​

css.modules ​

css.postcss ​

css.preprocessorOptions ​

css.preprocessorOptions[extension].additionalData ​

css.preprocessorMaxWorkers ​

css.devSourcemap ​

css.transformer ​

css.lightningcss ​

json.namedExports ​

json.stringify ​

esbuild ​

assetsInclude ​

logLevel ​

customLogger ​

clearScreen ​

envDir ​

envPrefix ​

appType ​

Opciones compartidas

root

base

mode

define

plugins

publicDir

cacheDir

resolve.alias

resolve.dedupe

resolve.conditions

resolve.mainFields

resolve.extensions

resolve.preserveSymlinks

html.cspNonce

css.modules

css.postcss

css.preprocessorOptions

css.preprocessorOptions[extension].additionalData

css.preprocessorMaxWorkers

css.devSourcemap

css.transformer

css.lightningcss

json.namedExports

json.stringify

esbuild

assetsInclude

logLevel

customLogger

clearScreen

envDir

envPrefix

appType