时间戳

首页 > 解决方案 > Vue.js 环境变量不适用于 Heroku 上的 axios

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

问题描述

我已经将一个 Vue.js 应用程序部署到 heroku 一个也托管在 heroku 上的 api。

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/ ) 而不是指定的在配置变量中。

标签： vue.jsaxios

解决方案

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

推荐阅读