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.
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.
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.
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.
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.
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
Esta web usa cookies.
Ver comentarios
Genio! me re sirvió. Muchas gracias por compartir.
Gracias por sus comentarios. Le agradecería si comparte y se suscribe :)
Saludos