title: Vue.js environment variables not working with axios on Heroku
body: <p>I have deployed a Vue.js application to heroku an api also hosted on heroku.</p>
  
  <p>The VueJS app uses axios to connect to the api.  I have set a config variable in heroku:</p>
  
  <p>VUE_APP_ROOT_API = <a href="https://[my-express-api].herokuapp.com/api" rel="nofollow noreferrer">https://[my-express-api].herokuapp.com/api</a></p>
  
  <p>Here is my base axios call:</p>
  
  <pre><code>import axios from 'axios'
  const token = localStorage.getItem('token')
  
  export default () =&gt; {
    console.log(process.env.VUE_APP_ROOT_API)
    return axios.create({
      baseURL: process.env.VUE_APP_ROOT_API,
      headers: {
        'Content-Type': 'application/json',
        token: token,
      },
      validateStatus: function () {
        return true;
      }
    })
  }
  </code></pre>
  
  <p>However, the console log reveals that the variable is undefined and axios is using the Vue app url as the base for api calls (<a href="https://[my-vue-app].herokuapp.com/undefined/" rel="nofollow noreferrer">https://[my-vue-app].herokuapp.com/undefined/</a>) instead of the one specified in the config variable. </p>