Vue.js环境变量无法在Heroku上使用axios

Question

我已经向heroku部署了一个Vue.js应用程序，这个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/)，而不是配置变量中指定的。

Answer 1

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

Answer 2

对我来说，在推送到heroku之前，在我的package.json中添加了"--mode production"的build命令就解决了这个问题。

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

祝你好运！