vue中根路径和拦截器设置

一、vue中最常规的根路径配置

在开发的时候我们会遇到很多域名有百分之80-90的相似的地方，这无疑是可以优化的一个点

//首先在main文件夹中引入axios
import axios from 'axios' //引入axios
Axios.defaults.baseURL = 'http://根路径相同的部位/';
Vue.prototype.$axios = axios //在Vue原型上面绑定axios  

二、、当然，我们也可以将根路径设置在拦截器之中

//首先在我们创建的连接器文件夹中引入axios(这里假设这个文件夹是myAxios)
import axios from 'axios'
//直接设置就行了
Axios.defaults.baseURL = 'http://根路径相同的部位/';
//下面的部分就是拦截器部分
// 拦截器： 在所有请求发出去之前，会拦截你，进行一些处理了以后，在发给服务器
Axios.interceptors.request.use(
    function(config) {
        // console.log('所有请求发出去之前执行：', config);
        // if(config.url !== '/login'){
        //   config.headers.Authorization = window.localStorage.getItem('heihei');
        // }
        if (!whiteList.includes(config.url)) {
            config.headers.Authorization = window.localStorage.getItem('heihei');
        }
        return config;
    },
    function(error) {
        return Promise.reject(error);
    }
);
// 响应拦截器： 所有请求返回给你页面发请求的位置之前，先经过响应拦截器处理一下数据结构，在发给当前的位置
Axios.interceptors.response.use(
    function(response) {
        // console.log('在返回给前端之前，先走这里，在打印对应页面的数据');
        return response;
    },
    function(error) {
        return Promise.reject(error);
    }
);
//然后将这个文件暴露出去
export default myAxios;
//-----------分割线-----------
//然后再main的文件中引入我们创建的拦截器
import myAxios from './utils/myAxios'