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

Question

我已经将Vue.js应用程序部署到了heroku上，该api也托管在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变量中指定的基础。

Answer 1

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

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

祝你好运！

Answer 2

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