¿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()

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

Héctorbliss

Enlaces relacionados

useDarkMode Hook con Tailwind CSS

Checa este otro Post

Cómo eliminar archivos sin usar de mi proyecto JS

Checa este otro Post

Animaciones web con React + Motion 🧙🏻