Las variables del entorno en Vue.js sirven para saber el entorno en el que estamos (producción o desarrollo) y también para acceder a otros datos que cambian dependiendo del entorno.

Por ejemplo, en producción podemos tener una clave API o una URL de la API, mientras que en desarrollo esas variables pueden cambiar.

Es por ello que las variables del entorno o environment variables de la Vue CLI vienen para ayudarnos, ya que nos permiten definir variables propias y también a conocer el entorno en el que estamos.

Saber si estamos en producción o desarrollo

Para acceder a las variables del entorno hay que acceder a process.env.NODE_ENV, esta variable es propia de node.

Cuando estemos en desarrollo, la misma estará en development y cuando estemos en producción, estará en production.

Aquí tenemos un ejemplo:

A partir de eso podemos hacer determinadas cosas como definir variables, aunque si quieres evitar los if, mira el siguiente apartado.

Leer nuestras propias variables del entorno con Vue

Si definimos un archivo .env y uno .env.production en nuestro código, podemos guardar variables ahí; y las mismas serán usadas para determinado caso.

Archivos env para Vue js y Vue CLI

Es decir, las del archivo .env serán usadas en modo desarrollo, y las de .env.production en modo producción. Podemos acceder a ellas igualmente a través de process.env.

Para definir una variable del entorno en un archivo, hay que prefijarla con VUE_APP_ , si no, no serán tomadas en cuenta. Veamos un ejemplo; en modo desarrollo tengo mi archivo .env:

Y en modo producción tengo mi otro archivo:

Dentro de mi código accedo a esa variable:

Cuando esté en modo desarrollo, se usará la de .env y cuando esté en modo producción (es decir, que ejecute npm run build) se usará la de .env.production

Nota: si estás probando, recuerda reiniciar el servidor; es decir, volver a ejecutar npm run serve, ya que los cambios no se toman en cuenta cuando la app ya está iniciada.

Conclusión

De este modo se pueden definir varias variables del entorno, y también saber si estamos dentro de producción o desarrollo, ya que todas las variables del entorno están en process.env.

Finalmente te dejo un enlace a la documentación oficial.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

2 Comentarios

Pablo · agosto 20, 2020 a las 7:57 am

Genio! me re sirvió. Muchas gracias por compartir.

    parzibyte · agosto 20, 2020 a las 11:02 am

    Gracias por sus comentarios. Le agradecería si comparte y se suscribe 🙂
    Saludos

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: