Cómo usar variables de entorno dinámicas en VueJS

#environment #vue #howto

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:

{
    "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:

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):

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.