¿Cómo cargar variables de entorno .env en Vite?

Podemos configurar Vite para que cargue todas las variables de entorno como usualmente. ✅

Vite no carga el archivo .env en automático, Vite evalúa primero la configuración, pues hay opciones que pueden afectar el comportamiento de la carga como root y envDir. ⚙️

Pero tenemos a la mano una herramienta (helper) que nos permite cargar archivos .env específicos:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Se carga el archivo env usando `mode` en el directorio actual.
  // Al colocar el tercer parámetro como '' se cargarán todos los archivos env aunque no tengan el prefijo `VITE_`
  const env = loadEnv(mode, process.cwd(), '') // '' es el hack 😉
  return {
    // vite config
    define: {
      __DATABASE_URL__: JSON.stringify(env.DATABASE_URL),
    },
  }
})

De esta forma cargamos variables de entorno en el más alto nivel.

Espero sea útil. Abrazo. Bliss. 🤓

Enlaces relacionados

process.cwd()