vue.js - TypeError：无法读取未定义的属性“$http” - 类星体

Question

我在互联网上寻找解决方案，但没有任何效果。有谁知道我做错了什么？

我尝试导入 index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '../boot/axios'
import axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(axios)
Vue.use(VueRouter)
Vue.use(Axios)

axios.js:
import axios from 'axios'

export default async ({
  Vue
}) => {
  const token = localStorage.getItem('token')
  if (token) {
    Vue.prototype.$http.defaults.headers.common['Authorization'] = `Bearer ${token}` }

  axios.interceptors.response.use(function (response) {
    return response
  }, function (error) {
    if (error.response.status === 401) {
      // refreshtoken
    } else {
      return Promise.reject(error)
    }
  })
  Vue.prototype.$http = axios
}

TypeError：无法读取未定义的属性“$http”

标签： vue.jsaxiosquasar-framework

Answer 1

    import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '../boot/axios'
import axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(axios)
Vue.use(VueRouter)
Vue.use(Axios)

axios.js:
import axios from 'axios'
Vue.prototype.$http = axios

export default async ({
  Vue
}) => {
  const token = localStorage.getItem('token')
  if (token) {
    Vue.prototype.$http.defaults.headers.common['Authorization'] = `Bearer ${token}` }

  axios.interceptors.response.use(function (response) {
    return response
  }, function (error) {
    if (error.response.status === 401) {
      // refreshtoken
    } else {
      return Promise.reject(error)
    }
  })

}

你应该在使用 Vue.prototype.$http 之前定义 Vue.prototype.$http = axios