Vue.js环境变量不适用于Heroku上的axios

时间:2019-09-24 16:55:04

标签: vue.js axios

我已经在heroku上部署了一个Vue.js应用程序,该应用程序也托管在heroku上。

VueJS应用程序使用axios连接到api。我在heroku中设置了一个配置变量:

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

这是我的基本axios电话:

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;
    }
  })
}

但是,控制台日志显示该变量未定义,并且axios使用Vue应用程序URL作为api调用(https://[my-vue-app].herokuapp.com/undefined/)的基础,而不是config变量中指定的基础。

2 个答案:

答案 0 :(得分:0)

对于我来说,在推送到heroku之前,将package.json中的build命令附加到'--mode production'之后,即可解决此问题。

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

祝你好运!

答案 1 :(得分:0)

解决了这个问题。事实证明,我的config变量是在构建时编译到代码中的,因此,一旦我部署触发重建,新的config var就可以工作了。添加/更新配置变量将自动重新启动dynos,但这不会重建任何已编译的代码。