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:

if (process.env.NODE_ENV === "development") {
    // Estamos en modo desarrollo
    console.log("Modo desarrollo");
} else {
    // En producción
    console.log("Modo producción");
}

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.

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:

VUE_APP_RUTA_API=http://localhost:2106

Y en modo producción tengo mi otro archivo:

VUE_APP_RUTA_API=../

Dentro de mi código accedo a esa variable:

export const RUTA_SERVIDOR = process.env.VUE_APP_RUTA_API;

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.