创建全局 Axios 配置并将其添加到 Vue 实例中

Question

我通过 Vue UI 依赖项安装将 Axios 添加到我的 Vue 应用程序中。我想通过使用访问我的组件中的 Axios

this.$http.myHTTPmethod

所以我根据这个文档创建了http.js

https://github.com/axios/axios#axioscreateconfig

import axios from "axios";

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default devInstance; // Check debug/build mode

我的问题：

如何让 axios 使用这个 axios 实例？以及如何this.$http像使用 Vue-Router ( this.$router)那样访问此实例？

Answer 1

你可以做一个插件：

import axios from "axios";
import Vue from 'vue'

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default {
    install () {
        Vue.prototype.$http = devInstance
    }
}; // Check debug/build mode

然后你的插件到你的main.js文件中，在创建你的主 Vue 实例之前，就像这样：

import Vue from 'vue'
import http from './plugins/http.js'

Vue.use(http)
...

通过这样做，您将可以使用axios从您的组件访问您的实例this.$http