Cómo utilizar variables de entorno en Vue.js

Introducción

En una aplicación web, lo más probable es que tengas que acceder a un servidor API de backend a través de una URL. En un entorno de desarrollo, cuando trabajas localmente, esta URL puede ser algo como: http://localhost:8080/api. En un entorno de producción, cuando se ha implementado el proyecto, esta URL puede ser algo como: https://example.com/api. Las variables de entorno te permiten cambiar esta URL automáticamente, según el estado actual del proyecto.

Con Vue.js es posible utilizar variables de entorno a través de archivos con .envextensión file. Estos archivos se encargan de almacenar información específica del entorno (“desarrollo”, “pruebas”, “producción”, etc.).

En este artículo, aprenderá a trabajar con distintas configuraciones entre el modo de desarrollo y producción para proyectos de Vue.js usando Vue CLI 3+ y 2.

Prerrequisitos

Para seguir este artículo necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Algunos conocimientos sobre la configuración de un proyecto Vue.js.

Este tutorial fue verificado con Node v15.1.0, npmv6.14.8, Vue.js v2.6.12, TypeScript v3.9.3, @vue/cliv4.5.8 y vue-cliv2.9.6.

Paso 1: Uso de .envarchivos con Vue CLI 3+

Vue CLI 4 es la versión actual de @vue/cli. Una vez que crea un proyecto Vue.js, puede agregar .envy .env.productionarchivos.

Con su terminal, cree un nuevo proyecto Vue.js con @vue/cli:

npx @vue/cli create vue-cli-env-example

Navegar al directorio del proyecto;

cd vue-cli-env-example

Con un editor de código, cree un .envarchivo y agregue valores como los siguientes:

.env

VUE_APP_ROOT_API=http://localhost/api

Luego, con un editor de código, crea un .env.productionarchivo y agrega valores como los siguientes:

.env.producción

VUE_APP_ROOT_API=http://www.example.com/api

Nota: El VUE_APP_prefijo es importante aquí y las variables sin ese prefijo no estarán disponibles en su aplicación.

Después de crear la VUE_APP_ROOT_APIvariable, puedes usarla en cualquier lugar de Vue a través del process.envobjeto global:

process.env.VUE_APP_ROOT_API

Por ejemplo, abra el HelloWorld.vuearchivo y en la scriptetiqueta agregue lo siguiente:

origen/componentes/HelloWorld.vue

scriptexport default {  name: 'HelloWorld',  props: {    msg: String  },  mounted() {    console.log(process.env.VUE_APP_ROOT_API)  },}/script

Si compila la aplicación con valores de desarrollo:

npm run serve

Este comando utilizará el .envvalor y el registro de la consola mostrará: http://localhost/api.

Si compila la aplicación con valores de producción:

npm run serve -- --mode=production

Nota: Es importante utilizar guiones dobles aquí para pasar las banderas de npma vue-cli-service.

También puedes utilizar este comando alternativo:

vue-cli-service serve --mode=production

Este comando utilizará el .env.productionvalor y el registro de la consola mostrará: http://www.example.com/api.

De forma predeterminada, Vue CLI admitirá tres modos: “desarrollo”, “prueba” y “producción”. Para obtener más información sobre el uso de variables de entorno con Vue CLI 3, consulte la documentación oficial .

Paso 2: Uso de .envarchivos con Vue CLI 2

Vue CLI 2 es la versión anterior de vue-cli. Una vez que creas un proyecto Vue.js, puedes usar dev.env.js, test.env.js, y prod.env.js.

Con su terminal, cree un nuevo proyecto Vue.js con vue-cli:

npx vue-cli init webpack vue-cli-two-env-example

Hay dos archivos en el configdirectorio: dev.env.jsy prod.env.js.

Estos archivos se utilizan en el modo de desarrollo y producción. Cuando se ejecuta la aplicación mediante el npm run devcomando, dev.env.jsse utiliza el archivo. Cuando se compila el proyecto para producción con el npm run buildcomando, prod.env.jsse utiliza el archivo en su lugar.

Ábralo dev.env.jsen un editor de código y agregue el ROOT_APIvalor:

configuración/dev.env.js

'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {  NODE_ENV: '"development"',  ROOT_API: '"http://localhost/api"'})

A continuación, ábralo prod.env.jsen un editor de código y agregue el ROOT_APIvalor:

configuración/prod.env.js

'use strict'module.exports = {  NODE_ENV: '"production"',  ROOT_API: '"http://www.example.com/api"'}

Después de crear la ROOT_APIvariable, puedes usarla en cualquier lugar de Vue a través del process.envobjeto global:

process.env.ROOT_API

Por ejemplo, abra el HelloWorld.vuearchivo y en la scriptetiqueta agregue lo siguiente:

origen/componentes/HelloWorld.vue

scriptexport default {  name: 'HelloWorld',  data () {    return {      msg: 'Welcome to Your Vue.js App'    }  },  mounted() {    console.log(process.env.ROOT_API)  },}/script

Si compila la aplicación con:

npm run dev

Este comando utilizará el dev.env.jsvalor y el registro de la consola mostrará: http://localhost/api.

Si compila la aplicación con:

npm run build

Este comando utilizará el prod.env.jsvalor y generará la aplicación en el distdirectorio. Navegue hasta este directorio y verifique que el process.env.ROOT_APIvalor utilice http://www.example.com/apien lugar de http://localhost/api.

Puedes trabajar con distintas variables para cada entorno, utilizando la configuración ya preparada que proporciona la plantilla webpack . Si utilizas otra plantilla, asegúrate de encontrar una función equivalente o utiliza una biblioteca como dotenv para gestionar tus variables de entorno.

Conclusión

En este artículo, aprendió a usar variables de entorno en proyectos creados con Vue CLI 3+ y 2.

Para proyectos actuales y futuros, se recomienda utilizar @vue/cli“moverse hacia adelante”, ya que vue-cliha quedado obsoleto.

Si desea obtener más información sobre Vue.js, consulte nuestra página de temas de Vue.js para obtener ejercicios y proyectos de programación.