Configurando Vite ​

Al ejecutar vite desde la línea de comandos, Vite intentará automáticamente resolver un archivo de configuración llamado vite.config.js dentro de la raíz del proyecto (también se admiten otras extensiones de JS y TS).

El archivo de configuración más básico se ve así:

// vite.config.js
export default {
  // opciones de configuración
}

Ten en cuenta que Vite admite el uso de la sintaxis de los módulos ES en el archivo de configuración, incluso si el proyecto no utiliza ESM de nodo nativo, por ejemplo type: "module" en el package.json. En este caso, el archivo de configuración se preprocesa automáticamente antes de cargarlo.

También puedes especificar explícitamente un archivo de configuración para usar con la opción CLI --config (resuelta relativa a cwd):

vite --config my-config.js

Configuración de Intellisense ​

Dado que Vite se distribuye con tipados de TypeScript, puedes aprovechar el intellisense de tu IDE con sugerencias de tipo jsdoc:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

Alternativamente, puedes usar el helper defineConfig que debería proporcionar intellisense sin necesidad de anotaciones jsdoc:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite también es compatible directamente con los archivos de configuración de TypeScript. También puedes usar vite.config.ts con el helper defineConfig.

Configuración condicional ​

Si la configuración necesita determinar condicionalmente las opciones basadas en el comando (dev/serve o build), el modo que se está utilizando, o si es una compilación SSR (ssrBuild), puedes exportar una función en su lugar:

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return {
      // configuración de desarrollo específico
    }
  } else {
    // command === 'build'
    return {
      // configuración de compilación específico
    }
  }
})

Es importante tener en cuenta que en la API de Vite, el valor de command es serve durante el desarrollo (en el cli vite, vite dev y vite serve son alias) y build cuando se compila para producción (vite build).

ssrBuild es experimental. Solo está disponible durante la compilación en lugar de un indicador ssr más general porque, durante el desarrollo, la configuración es compartida por el servidor único que maneja las solicitudes SSR y no SSR. El valor podría ser undefined para las herramientas que no tienen comandos separados para el navegador y la compilación de SSR, así que usa una comparación explícita con true y false.

Configuración de funciones asíncronas ​

Si la configuración necesita llamar a funciones asíncronas, puedes exportar una función asíncrona en su lugar. Y esta función asíncrona puede ser pasada como defineConfig para mejorar el soporte intellisense.

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // configuración de vite
  }
})

Utilizando variables de entorno en Configuración ​

Las variables de ambiente se pueden obtener de process.env como de costumbre.

Ten en cuenta que Vite no carga archivos .env de forma predeterminada, ya que los archivos que se cargarán solo se pueden determinar después de evaluar la configuración de Vite, por ejemplo, las opciones root y envDir afectan el comportamiento de carga. Sin embargo, puedes usar el helper loadEnv exportado para cargar el archivo .env específico si es necesario.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Carga el archivo env basado en el `modo` en el directorio de trabajo actual.
  // Coloca el tercer parámetro en '' para cargar todos los env independientemente del prefijo `VITE_`.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // configuración de vite
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})