1、在vue项目的根目录创建vue.config.js

代码如下：

module.exports = {
  devServer: {                //webpack-dev-server配置
      host : 'localhost',
      port : 8080,            //配置本项目运行端口
      proxy: {                //配置代理服务器来解决跨域问题
          '/api': {
              target: 'http://localhost:8010',      //配置要替换的后台接口地址
              changOrigin: true,                      //配置允许改变Origin
              pathRewrite: {
                  '^/api': ''
              }
          },
      }
  },
}

2、axios拦截器以及api封装

axios拦截器代码

// file:request.js
// 1、引入axios库
import axios from "axios"

// 2、创建axios实例
const service = axios.create({
    baseURL: '/api',  // api的base_url
    timeout: 5000  // 请求超时时间
})

// 3、请求拦截器
service.interceptors.request.use(
    config => {
        console.log("request url="+config.url)

        // 获取token，如果有token，就放入http的请求头里面
        let token = window.sessionStorage.getItem("token")
        if(token) {
            config.headers = {
                'token': token
            }
        }

        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 4、响应拦截器
service.interceptors.response.use(
    response => {
        // 定时刷新token
        console.log(response.data)
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

api封装

// file:api.js
// 1、导入axios以及拦截器
import service from './request'

// 2、定义登录函数接口
export const login = (data) => {
    return service({
        url: '/user/loginByBody',
        method: 'post',
        data
    })
};

3、接口使用

    import {userList} from '../api/api.js'
    export default {
        data() {
            return {}
        },
        mounted() {
            userList().then(res=>{
                console.log(res);
            })
        },
        created() {
            console.log("create");
        },
        methods: {

        }
    }