为什么忽略为vue-resource设置Vue.http？

Question

我正在使用Vue.js 2.3.3，Vue Resource 1.3.3，Vue Router 2.5.3，并且我正在尝试设置Vue-Auth。然而，我一直收到一个控制台错误，上面写着auth.js?b7de:487 Error (@websanova/vue-auth): vue-resource.1.x.js : Vue.http must be set.。我在main.js中设置了Vue.http，但是由于某些原因，vue-resource不能使用它。

main.js：

import Vue from 'vue'
import Actions from 'actions'
import App from './App'

Vue.use(Actions, {
  locales: ['en', 'zh', 'fr']
})

Vue.http.options.root = 'https://api.example.com'

new Vue({
  render: h => h(App),
  watch: {
    lang: function (val) {
      Vue.config.lang = val
    }
  }
}).$mount('#app')

操作/index.js

import VueResource from 'vue-resource'
import Router from 'actions/router'
import I18n from 'actions/i18n'

export default {
  install (Vue, options) {
    Vue.use(Router)
    Vue.use(I18n, options.locales)
    Vue.use(require('@websanova/vue-auth'), {
      router: require('@websanova/vue-auth/drivers/router/vue-router.2.x'),
      auth: require('@websanova/vue-auth/drivers/auth/bearer'),
      http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x')
    })
  }
}

如果我将Vue.use(VueResource)添加到Vue.use(Router)下面的actions/index.js中，我会得到一个新的错误：Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

另一方面，如果我将Vue.http.options.root = 'https://api.example.com'移到import语句的正下方，我会得到另一个错误：Uncaught TypeError: Cannot read property 'options' of undefined

Answer 1

你需要将'vue-resource‘导入到你的main.js文件中来避免这个错误：

import Vue from 'vue'
import VueResource from 'vue-resource';
import Actions from 'actions'
import App from './App'

Vue.use(Actions, {
  locales: ['en', 'zh', 'fr']
})

Vue.use(VueResource)
Vue.http.options.root = 'https://api.example.com'

new Vue({
  render: h => h(App),
  watch: {
    lang: function (val) {
      Vue.config.lang = val
    }
  }
}).$mount('#app')

Answer 2

使用axios而不是vue-resource，这对我来说是一个有效的设置：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueRouter)
Vue.use(VueAxios, axios)

Vue.router = new VueRouter({
  // Your routes.
})

Vue.use(require('@websanova/vue-auth'), {
    auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
})

App.router = Vue.router

new Vue(App).$mount('#app')

有关更多指导，请参阅此教程：https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0