Cómo usar variables de entorno dinámicas en VueJS
Tags: environment, vue, howto
Published: 2018-09-20 14:06:21

---
title: Cómo usar variables de entorno dinámicas en VueJS
published: true
description: Cómo usar variables de entorno dinámicas en VueJS
tags: environment, vue, vuejs, how to
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z3tnhlezctcqudn6cy2b.jpg
---
[*Read in English*](https://dev.to/djdany01/how-to-use-dynamic-environment-variables-in-vuejs-4l3e)

Imaginad que necesitais hacer una aplicación que depende de una API para recoger sus datos, y nuestro desarrollo se divide en 3 fases de despliegue:
- Test
- Dev
- Prod


Lo que queremos conseguir es que, depende de la fase en la que nos encontremos, la aplicación pueda llamar al servicio correspondiente, y no queremos tener que desplegar la aplicación cada vez que cambian las URLs o cambiamos de fase y por tanto de URLs.
Lo que haremos será crear un archivo json en nuestra carpeta de estáticos, la estructura del ejemplo quedaría así:
###### /static/config.json


El archivo para el ejemplo contendrá la URL que se usará por defecto:
```json
{
	"URL": "https://pordefecto.algo"
}
```


Ahora en nuestra aplicación Vue donde usemos la url declararemos en la función created() una falsa llamada GET al archivo, en este ejemplo usaremos *axios*:
```javascript
created: function() {
    axios.get("static/config.json").then(response => {
      this.URL = response.data.URL;
    });
  }
```
Así nuestra aplicación recuperará dinamicamente esa url, pudiendo modificarla más tarde sin necesidad de volver a hacer el build.


Bien, ahora tendremos que definir un archivo por cada fase, en nuestro caso 3 fases, 3 archivos en la carpeta environments (más el por defecto que ya hemos definido antes en *static*), la estructura quedaría así:
###### /environments/test/config.json
###### /environments/dev/config.json
###### /environments/pro/config.json


Así que tenemos ya los 3 archivos para cada fase (más el por defecto) y la aplicación llama dinamicamente al archivo para coger la URL, ahora nos tenemos que asegurar de que cuando la aplicación se despliegue *(npm run build)* también se copie la carpeta environments al destino del mismo. Esto podemos hacerlo de muchas maneras automaticamente (CopyWebpackPlugin, npm run script...) o nosotros manualmente copiando la carpeta donde corresponda, como ejemplo usaré el plugin para webpack CopyWebpackPlugin que nos permite copiar archivos añadiendo lo siguiente a nuestro archivo de configuración en este caso, */build/webpack.base.conf.js* (cambialo según tu configuración): 
```javascript
output: {
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static/js'),
        to: path.resolve(__dirname, '../dist/js')
      },
      {
        from: path.resolve(__dirname, '../static/config.json'),
        to: path.resolve(__dirname, '../dist/static')
      },
      {
        from: path.resolve(__dirname, '../config/environments/'),
        to: path.resolve(__dirname, '../dist')
      }
    ])]
```


Finalmente, nuestra estructura después de hacer el build quedaría así:
###### /dist/index.html
###### /dist/static/config.json
###### /dist/environments/test/config.json
###### /dist/environments/dev/config.json
###### /dist/environments/pro/config.json
###### /dist/static/js/...


Ahora cada vez que despleguemos nuestra aplicación nos aseguraremos de reemplazar el */static/config.json* con el de la fase que corresponda, pudiendo hacerlo nosotros manualmente o si contamos con algún proceso de CI *(Integración Continua)* como Jenkins, podremos configurarlo para que copie el archivo que corresponda según la fase que despliegue.

### Thanks to the entire dev.to community!