Vue.js environment variables not working with axios on Heroku

Question

I have deployed a Vue.js application to heroku an api also hosted on heroku.

The VueJS app uses axios to connect to the api. I have set a config variable in heroku:

VUE_APP_ROOT_API = https://[my-express-api].herokuapp.com/api

Here is my base axios call:

import axios from 'axios'
const token = localStorage.getItem('token')

export default () => {
  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;
    }
  })
}

However, the console log reveals that the variable is undefined and axios is using the Vue app url as the base for api calls (https://[my-vue-app].herokuapp.com/undefined/) instead of the one specified in the config variable.

user2799827 · Accepted Answer · 2019-10-29 01:30:22Z

2

Resolved this. It turns out that my config variable was being compiled into the code at build time, so once I deployed to trigger a rebuild, the new config var worked. Adding/Updating config vars will automatically restart the dynos, but that doesn't rebuild any compiled code.

answered Oct 29, 2019 at 1:30

user2799827

1,1393 gold badges24 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

healthy_meerkat · Accepted Answer · 2019-10-28 00:05:17Z

0

For me, appending the build command in my package.json with '--mode production' before pushing to heroku fixed the issue.

https://forum.vuejs.org/t/production-env-on-app-deployed-in-heroku/71077

Good luck!

answered Oct 28, 2019 at 0:05

healthy_meerkat

1322 silver badges7 bronze badges

Collectives™ on Stack Overflow

Vue.js environment variables not working with axios on Heroku

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related