一、直接使用axios時

1、在main.js中：

 import axios from 'axios'
 Vue.prototype.$axios = axios; // 在模板中可直接使用this.$axios進(jìn)行接口調(diào)用
 axios.defaults.baseURL = '/api' 

2、模板文件中的method中

methods: {
    //獲取用戶列表
    getUsers() {
            this.$axios.get("/user/listpage").then((res)=>{
            this.total = res.data.total;
            this.users = res.data.users;
     })
}

3、配置文件（config/index.js）

#dev中的proxyTable的值：
proxyTable: {
      '/api': {#匹配/api的path，因為main中baseUrl是/api
        target: 'http://127.0.0.1:5000/', # 服務(wù)端
        changeOrigin: true,//跨域配置
        pathRewrite: {
          '^/api': '' #前端發(fā)請求匹配到的api替換成空，如上例：前端將請求“http://127.0.0.1:5000/api/user/listpage”,但真實請求是“http://127.0.0.1:5000/user/listpage”
        }
      } 

二、封裝axios時

1、api目錄下封裝axios到api.js

import axios from 'axios';
let base = '/api';
export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); };
# 可以把所有服務(wù)端接口封裝到該文件下，都是按照export的格式
# export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };
# export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); };

2、export封裝好的api，在api目錄下的index.js文件

import * as api from './api'; # 上面封裝的所有服務(wù)端接口的導(dǎo)入
export default api; # export讓別人使用

3、模板中的method

import { getUserListPage } from '../../api/api'; # 引入封裝好的api模塊
methods: {
            //獲取用戶列表
            getUsers() {
                let para = { // 請求參數(shù)
                    page: this.page,
                    name: this.filters.name
                };
                this.listLoading = true;
                getUserListPage(para).then((res) => { #調(diào)用封裝的該方法
                    this.total = res.data.total;
                    this.users = res.data.users;
                    this.listLoading = false;
                    //NProgress.done();
                });
}

4、跨域配置，依舊在config/index，同上