Opciones compartidas ​

A menos que se indique lo contrario, las opciones en esta sección se aplican a desarrollo, compilación y vista previa.

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',
  },
})

plugins ​

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

Array de plugins a usar. Los plugins falsos se ignoran y los arrays de plugins se simplifican. Si se devuelve una promesa, se resolvería antes de ejecutarse. Consulta la API de plugins para obtener más detalles sobre los plugins 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 plugins.

resolve.conditions ​

• Tipo: string[]
• Por defecto: ['module', 'browser', 'development|production'] (defaultClientConditions)

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:

{
  "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.

development|production es un valor especial que se reemplaza con production o development dependiendo del valor de process.env.NODE_ENV. Se reemplaza con production cuando process.env.NODE_ENV === 'production' y con development en caso contrario.

Ten en cuenta que las condiciones import, require, default siempre se aplican si se cumplen los requisitos.

resolve.mainFields ​

• Tipo: string[]
• Por defecto: ['browser', 'module', 'jsnext:main', 'jsnext'] (defaultClientMainFields)

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. Los archivos de configuración fuera de la raíz del espacio de trabajo (o de la raíz del proyecto si no se encuentra un espacio de trabajo) no se buscan por defecto. Puedes especificar una ruta personalizada fuera de la raíz para cargar el archivo de configuración específico si es necesario.

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:
  • Selecciona la API de Sass a usar con api: "modern-compiler" | "modern" | "legacy" (por defecto "modern-compiler" si se tiene instalado sass-embedded, de lo contrario "modern"). Para obtener el mejor rendimiento, se recomienda usar api: "modern-compiler" con el paquete sass-embedded. La API "legacy" está obsoleta y se eliminará en Vite 7.
  • Opciones (moderna)
  • Opciones (legacy).
• less: Opciones.
• styl/stylus: Solo se soporta define, el cual puede ser pasado 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.

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 | 'auto'
• Por defecto: 'auto'

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.

Si se configura en 'auto', los datos se convertirán en una cadena solo si los datos son mayores de 10 kB.

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 plugin 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 plugin 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.

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.

future ​

• Tipo: Record<string, 'warn' | undefined>
• Relacionado: Cambios importantes

Habilita cambios importantes futuros para prepararse para una migración fluida a la próxima versión principal de Vite. La lista puede actualizarse, ampliarse o eliminarse en cualquier momento a medida que se desarrollen nuevas características.

Consulta la página de Cambios importantes para obtener detalles sobre las opciones posibles.