TypeError: this.Vue.axios 在使用 axios HTTP 驱动时未定义

Question

在 Axios HTTP 驱动程序中使用 vue-auth (vue-auth on GitHub) 我在浏览器控制台中收到以下错误：

TypeError: this.Vue.axios is undefined

ma​​in.js

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import "./libs/vue-auth";

./libs/vue-auth.js

import Vue from "vue";
import vueAuth from "@websanova/vue-auth";
import bearer from "@websanova/vue-auth/drivers/auth/bearer";
import axiosHttp from "@websanova/vue-auth/drivers/http/axios.1.x";
import vueRouter from "@websanova/vue-auth/drivers/router/vue-router.2.x";

// Vue.axios = axios;

Vue.use(vueAuth, {
  auth: bearer,
  http: axiosHttp,
  router: vueRouter
  // ...
});

删除Vue.axios = axios; 的评论时，乍一看似乎有效。所以我想将Vue.axios = axios; 移动到main.js，但它再次不起作用。

Answer 1

Vue.axios 可以手动分配，也可以使用vue-axios 插件分配。由于@websanova/vue-auth/drivers/http/axios.1.x 期望它存在于插件初始化中：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
...

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

将 Vue.use(VueAxios, axios) 移动到 main.js 将不起作用，因为它应该在导入 ./libs/vue-auth 之前进行评估，并且根据 JS 规范它不能在导入之前。 Vue.use(...) 应该一起移动到 main.js，或者它们都应该位于 ./lib 模块中。