como manejar variables de entorno en una aplicacion vue 3 + vite

 Vite es un herramienta de construcción (build tool) moderna y ultrarrápida que se ha convertido en el estándar recomendado para proyectos Vue.js (desde Vue 3).

Comandos esenciales
# Desarrollo
npm run dev

# Build para producción
npm run build

# Preview del build
npm run preview
¿Cómo funciona en Vite?
Vite busca archivos .env en la raíz de tu proyecto y los carga automáticamente. Lo interesante es que puedes crear archivos específicos para cada "modo" (desarrollo o producción):
  1. .env.development: Las variables aquí se usarán únicamente cuando ejecutes npm run dev.                 Sobrescriben cualquier variable con el mismo nombre que esté en .env.
  2. .env.production: Las variables aquí se usarán únicamente cuando construyas tu aplicación con npm run build. También sobrescriben las de .env.
  3. .env: Este es el archivo base. Sus variables se cargan en todos los entornos, a menos que sean sobrescritas por un archivo más específico como los anteriores.
por ejemplo:
.env.development
# URL del backend para el entorno de DESARROLLO
# Se usa al ejecutar "npm run dev" 
VITE_API_URL=http://192.168.100.4:8081



.env.production
# URL del backend para el entorno de PRODUCCIÓN
# Se usa al ejecutar "npm run build" 
VITE_API_URL=https://api.tuverduleria.com



¿Cómo sabe Vite cuál usar?
  • Cuando ejecutas npm run dev, Vite está en modo development, por lo que cargará .env.development y VITE_API_URL será http://192.168.100.4:8081.
  • Cuando ejecutas npm run build, Vite está en modo production, por lo que cargará .env.production y VITE_API_URL será https://api.tuverduleria.com.
Recomendación: Archivos .env.local
A veces, otro desarrollador en tu equipo puede tener el backend en una IP diferente (ej. 192.168.1.50). Para manejar esto sin modificar archivos que están en el control de versiones (Git), se usa un archivo                    .env.local o .env.development.local.
  • .env.local: Sobrescribe todos los demás archivos en todos los entornos.
  • .env.development.local: Sobrescribe a .env y .env.development, pero solo en desarrollo.
Estos archivos .local nunca deben subirse a Git. Asegúrate de que tu archivo .gitignore los ignore:

# .gitignore
# Variables de entorno locales
.env.local
.env.*.local
Con esta configuración, tu proyecto es ahora mucho más flexible y está preparado para desplegarse en 
cualquier lugar.




Comentarios

Publicar un comentario

Entradas populares de este blog

crear un properties local + implementar actuator/health

 1) en pom.xml <dependency>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-actuator</artifactId> </dependency> 2) crear application-local.properties y agregar: management.endpoints.web.exposure.include=health management.endpoint.health.show-details=always 3 )    SecurityConfig exige autenticación para anyRequest(), por eso /actuator/health puede rechazarse. Permite explícitamente el endpoint de health // ...existing code...                 . authorizeHttpRequests (authz -> authz                         . requestMatchers ( "/api/auth/**" , "/api/usuarios/registrar" ). permitAll ()                         . requestMatchers ( "/actuator/health" ). permitAll () // <-- permitir health           ...
Leer más

subir un proyecto local a un repositorio de github

  Paso 1: Crear un repositorio en GitHub Entrá a https://github.com . En la esquina superior derecha, hacé click en el botón + → New repository . Elegí: Repository name : el nombre de tu proyecto. Public o Private (según prefieras). NO marques la opción de “Initialize with README” (porque ya tenés el proyecto local). Hacé click en Create repository . Al final te mostrará una página con las instrucciones para conectar tu repo local al remoto. Paso 2: Inicializar Git en tu proyecto (en tu PC) Abrí una terminal dentro de la carpeta de tu proyecto : cd ruta/de/tu/proyecto git init Esto crea un repositorio Git local. aparecerá un mensaje similar a este: Initialized empty Git repository in C:/mis-proyectos/demopushme/.git/ 🔹 Paso 3: Conectar tu proyecto con GitHub En la página del repositorio recién creado, GitHub te muestra la URL del repo, algo así como: https: //github.com/tu-usuario/nombre-repo.git Copiala y ejecutá: git remote add origin https://gi...
Leer más