Las variables de entorno son símbolos que sirven para definir distintos valores configurables y usarlos en distintos lugares, por ejemplo en entornos de desarrollo, producción o pruebas. Vite ofrece una forma particular de trabajar con estas variables.

Cómo funcionan las variables de entorno en Vite

Vite utiliza archivos especiales llamados .env para definir variables que estarán disponibles en nuestro proyecto. Estas variables se cargan automáticamente en process.env durante la construcción o el arranque del servidor de desarrollo.

Vite reconoce varios archivos .env según el modo de ejecución:

• .env — Variables comunes a todos los entornos.
• .env.local — Variables locales (no deben subirse al control de versiones).
• .env.[mode] — Variables específicas para un modo, como .env.production o .env.development.
• .env.[mode].local — Variables específicas para un modo y para uso local.

Así organizamos las variables de manera más precisa, evitando confusión entre configuraciones locales y de producción.

Un detalle importante: en Vite, solo las variables que empiezan con VITE_ estarán disponibles en el código cliente. Esto agrega una capa de seguridad evitando que accidentalmente expongamos datos sensibles.

Crear y utilizar variables de entorno

Supongamos que queremos definir la URL base de nuestra API. Crearíamos un archivo llamado .env en la raíz del proyecto con el siguiente contenido:

VITE_API_URL=https://api.midominio.com

Luego, dentro de nuestro código, podemos acceder a esta variable de la siguiente manera:

const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiUrl); // https://api.midominio.com

Observamos que Vite utiliza import.meta.env en lugar de process.env, como en otros entornos basados en Node.js. Esto se debe a que Vite realiza la sustitución de las variables en tiempo de construcción, optimizando el resultado final.

Modos y carga manual de variables

Vite soporta modos personalizados además de development y production. Podemos arrancar el servidor o construir el proyecto en un modo diferente usando el flag --mode. Por ejemplo:

vite --mode staging

Esto hará que Vite busque y cargue las variables de .env.staging (además de .env).

Buenas prácticas

Cuando trabajamos con variables de entorno en Vite, conviene seguir algunas pautas:

• Prefijar siempre con VITE_ lo que necesitemos en el cliente
• No colocar secretos o credenciales directamente en los archivos .env
• Utilizar .env.local para valores que no deben compartirse
• Definir claramente qué variables corresponden a cada entorno
• Documentar las variables esperadas en un archivo como README.md

Esta estructura evita problemas de configuración entre miembros del equipo y facilita la automatización de despliegues.

Conclusión

Aprender a utilizar las variables de entorno en Vite correctamente nos ayuda a escribir proyectos más organizados, configurables y preparados para cambios en cada entorno de ejecución.