Uso de variables de entorno con Vue.js

Buscamos por el mundo online para traerte la respuesta a tu problema, si continúas con alguna pregunta puedes dejarnos un comentario y te responderemos porque estamos para ayudarte.

Solución:

Si usa vue cli con la plantilla Webpack (configuración predeterminada), puede crear y agregar sus variables de entorno a un archivo .env.

Las variables serán automáticamente accesibles bajo process.env.variableName en tu proyecto Las variables cargadas también están disponibles para todos los comandos, complementos y dependencias de vue-cli-service.

Tiene algunas opciones, esto es de la documentación de Variables de entorno y modos:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Su archivo .env debería verse así:

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

Tengo entendido que todo lo que necesita hacer es crear el archivo .env y agregar sus variables, ¡entonces está listo para comenzar! 🙂

Como se indica en el comentario a continuación:
Si está utilizando Vue cli 3, solo las variables que comienzan con VUE_APP_ se cargará.

No olvides reiniciar atender si se está ejecutando actualmente.

Si está utilizando Vue cli 3, solo se cargarán las variables que comiencen con VUE_APP_.

En la raíz, cree un archivo .env con:

VUE_APP_ENV_VARIABLE=value

Y, si se está ejecutando, debe reiniciar atender para que se puedan cargar los nuevos env vars.

Con esto, podrá usar process.env.VUE_APP_ENV_VARIABLE en su proyecto (archivos .js y .vue).

Actualizar

Según @ali6p, con Vue Cli 3, no es necesario instalar la dependencia dotenv.

1. Cree dos archivos en la carpeta raíz (cerca de package.json) .env y .env.production
2. Agregue variables a estos archivos con prefix VUE_APP_ p.ej: VUE_APP_WHATEVERYOUWANT
3. atender usos .env y construir usos .env.production
4. En sus componentes (vue o js), use process.env.VUE_APP_WHATEVERYOUWANT llamar valor
5. No olvides reiniciar atender si se está ejecutando actualmente
6. Borrar caché del navegador

Asegúrese de estar usando vue-cli versión 3 o superior

Para más información: https://cli.vuejs.org/guide/mode-and-env.html

Si crees que ha resultado de ayuda nuestro post, te agradeceríamos que lo compartas con otros seniors así contrubuyes a dar difusión a este contenido.

---

---

Utiliza Nuestro Buscador