axios全局配置及配置代理（vue-cli2，vue-cli3

axios使用说明文档
vue-cli2中axios 全局配置：
需要自己新建一个配置文件（如：axios-init.js），我是直接在config目录下新建的。

   //axios-init.js 
   import axios from 'axios';

   axios.defaults.baseURL = env === 'development' ? '/api' : window.location.protocol + '//' + window.location.host; // 配置axios请求的地址
   axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
   axios.defaults.crossDomain = true;
   axios.defaults.withCredentials = true;  //设置cross跨域 并设置访问权限 允许跨域携带cookie信息

   //配置发送请求前的拦截器 可以设置token信息 
   axios.interceptors.request.use(
        config => {
          // 这里配置全局loading
          if (!(/\.json/.test(config.url))) {
            $('#screen').show() // 这个div控制loading动画，项目中有对json的请求，所以这里区分是否是json文件
          }
          return config
       }, error => {
          return Promise.reject(error)
       }
    )

    // 配置响应拦截器 
    axios.interceptors.response.use(
      res => {
        $('#screen').hide() // loading结束
        return Promise.resolve(res.data) // 这里直接返回data, 即接口返回的所有数据
      }, error => {
          $('#screen').hide();
          tooltip('', '连接错误！', 'error');
          // 判断是否登录失效，按照实际项目的接口返回状态来判断
          if (error.toString().includes('776')) {
              window.location.href = window.location.origin + '/#/login'
          }
          return Promise.reject(error);
        }
    )
    export default axios

最后在main.js里面引入

import VueAxios from 'vue-axios' // 报错的话则npm安装依赖
import axios from './../config/axios-init'

Vue.use(VueAxios, axios)

页面使用：

// get
this.axios.get('/api/url').then((data) => {
   if (data.success) {
     this.initPage(data.obj)
   }
})
// post
var data = { 'name': this.editName, 'id': item.id }
this.axios.post('/api/edit', data).then((res) => {
    tooltip('', '操作成功！', 'success')
})

vue-cli3中引入axios：

• 直接使用命令：vue add axios
  然后便会自动生成axios.js 文件（在plugins目录下），并在main.js中自动引入。在vue-cli2中这两步为手动添加，vue-cli3则自动添加好了
• 所以只需要配置axios.js内的拦截即可，大体配置内容和上文的axios-init.js差不多
• 配置代理
  vue-cli2中是在config目录下的index.js 文件中配置；而vue-cli3则是在vue.config.js（手动新增）中配置。

// vue-cli2 配置举例，config/index.js中
dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
  // 配置代理
    proxyTable: {
      '/api': {
        target: 'http://192.168.1.160:9999',
        changeOrigin: true, // 是否允许跨越, 开发环境中使用
        pathRewrite: {
          '^/api': ''
        }
      }
    }
// ....
}

// vue-cli3 配置举例， vue.config.js中
devServer: {
    proxy: {
      "/api": {
        target: "http://192.168.1.160:9999",
        changeOrigin: true, // 是否允许跨越, 开发环境中使用
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }