1.首先配置vue.config.js

vue.config.js

	  module.exports = {
	    lintOnSave: false, //如果为false，就是取消eslint规则的检查
	    devServer: {
	      overlay: { // 让浏览器 overlay 同时显示警告和错误
	        warnings: true,
	        errors: true
	      },
	      hot: true,
	      host: "localhost",
	      port: 8080, // 端口号
	      https: false, // https:{type:Boolean}
	      open: true, //配置后自动启动浏览器1
	      hotOnly: true, // 热更新
	      proxy: { //配置多个代理
	        "/testIp": {
	          target: "http://47.104.68.37:10000/v1.0/zg_entrust_service",
	          changeOrigin: true,
	          // ws: true,//websocket支持
	          secure: false,
	          pathRewrite: {
	            "^/testIp": "/"
	          }
	        },
	        "/elseIp": {
	          target: "http://192.168.1.13:10004",
	          changeOrigin: true,
	          //ws: true,//websocket支持
	          secure: false,
	          pathRewrite: {
	            "^/elseIp": "/"
	          }
	        },
	      }
	    }
	  
	  }

2.引入两个文件夹放到src下

1》 api/api.js

	import http from '../utils/http'
	let resquest = "/testIp/"
	export default class api {
	    // 
	    /**
	     *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
	     *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
	     */
	    // get请求 
	    static getListAPI(params, url) {
	        return http.get(`${resquest}${url}`, params)
	        // return http.get(`${resquest}queryTestProject`,params)
	    }
	    // post请求
	    static postFormAPI(params,url) {
	        return http.post(`${resquest}${url}`, params)
	    }
	    // put 请求
	    static putSomeAPI(params,url) {
	        return http.put(`${resquest}${url}`, params)
	    }
	    // delete 请求
	    static deleteListAPI(params,url) {
	        return http.delete(`${resquest}${url}`, params)
	    }
	}

2》utils/http.js

	/****   http.js   ****/
	// 导入封装好的axios实例
	import request from './request'
	const http ={
	    /**
	     * methods: 请求
	     * @param url 请求地址 
	     * @param params 请求参数
	     */
	    get(url,params){
	        const config = {
	            method: 'get',
	            url:url
	        }
	        if(params) config.params = params
	        return request(config)
	    },
	    post(url,params){
	        const config = {
	            method: 'post',
	            url:url
	        }
	        if(params) config.data = params
	        return request(config)
	    },
	    put(url,params){
	        const config = {
	            method: 'put',
	            url:url
	        }
	        if(params) config.params = params
	        return request(config)
	    },
	    delete(url,params){
	        const config = {
	            method: 'delete',
	            url:url
	        }
	        if(params) config.params = params
	        return request(config)
	    }
	}
	//导出
	export default http

3》utils/request.js

	/****   request.js   ****/
	// 导入axios
	import axios from 'axios'
	// 使用element-ui Message做消息提醒
	import { Message } from 'element-ui';
	//1. 创建新的axios实例，
	const service = axios.create({
	  // 公共接口--这里注意后面会讲
	  baseURL: process.env.BASE_API,
	  // 超时时间 单位是ms，这里设置了3s的超时时间
	  timeout: 3 * 1000
	})
	// 2.请求拦截器
	service.interceptors.request.use(config => {
	  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
	  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
	  config.headers = {
	    'Content-Type': 'application/json', //配置请求头
	    'Accept': "application/json",
	  }
	  //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
	  const token = sessionStorage.getItem("token");//这里取token之前，你肯定需要先拿到token,存一下
	  //  const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
	  if (token) {
	    // config.params = {'token':token} //如果要求携带在参数中
	    config.headers.token = token; //如果要求携带在请求头中
	  }
	  return config
	}, error => {
	  Promise.reject(error)
	})
	
	// 3.响应拦截器
	service.interceptors.response.use(response => {
	  //接收到响应数据并成功后的一些共有的处理，关闭loading等
	  return response
	}, error => {
	  /***** 接收到异常响应的处理开始 *****/
	  if (error && error.response) {
	    // 1.公共错误处理
	    // 2.根据响应码具体处理
	    switch (error.response.status) {
	      case 400:
	        error.message = '错误请求'
	        break;
	      case 401:
	        error.message = '未授权，请重新登录'
	        break;
	      case 403:
	        error.message = '拒绝访问'
	        break;
	      case 404:
	        error.message = '请求错误,未找到该资源'
	        // window.location.href = "/NotFound"
	        break;
	      case 405:
	        error.message = '请求方法未允许'
	        break;
	      case 408:
	        error.message = '请求超时'
	        break;
	      case 500:
	        error.message = '服务器端出错'
	        break;
	      case 501:
	        error.message = '网络未实现'
	        break;
	      case 502:
	        error.message = '网络错误'
	        break;
	      case 503:
	        error.message = '服务不可用'
	        break;
	      case 504:
	        error.message = '网络超时'
	        break;
	      case 505:
	        error.message = 'http版本不支持该请求'
	        break;
	      default:
	        error.message = `连接错误${error.response.status}`
	    }
	  } else {
	    // 超时处理
	    if (JSON.stringify(error).includes('timeout')) {
	      Message.error('服务器响应超时，请刷新当前页')
	    }
	    error.message = '连接服务器失败'
	  }
	
	  Message.error(error.message)
	  /***** 处理结束 *****/
	  //如果不需要错误处理，以上的处理过程都可省略
	  return Promise.resolve(error.response)
	})
	//4.导入文件
	export default service

3.在main.js里边全局注册

	import api from '../src/api/api'
	
	Vue.prototype.api=api;

4.页面请求接口

5.亲测可行，请求不到看看request.js 里边的token