CODEWITHSUNDEEP
vue.jsaxios
user2799827
user2799827

Reputation: 1127

Vue.js environment variables not working with axios on Heroku

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.

Upvotes: 1

Views: 1818

Answers (2)

user2799827
user2799827

Reputation: 1127

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.

Upvotes: 2

healthy_meerkat
healthy_meerkat

Reputation: 132

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!

Upvotes: 0

Related Questions