vue访问后台接口除了常用的jquery中ajax请求 ，如下

$.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                        
                      }
         });

 也可以使用axios进行访问：

引入axios

npm install axios -s  // 安装

添加 http.js api.js文件，为了方便可以在工程目录src下添加request文件夹，并在request文件夹中添加 这两个js文件。

http.js

包含引入， 定义baseurl,设置请求头，请求响应拦截器，封装常用get、post  put patch delete 方法

import axios from 'axios';// 引入axios
import QS from 'QS'; //post 参数序列化
import { Message } from 'iview';

//环境切换 
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'https://localhost:80';  //基础url + api.js中的 url
} else if (process.env.NODE_ENV == 'debug') {
    axios.defaults.baseURL = 'https://localhost:80'
} else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'https://http://47.105.48.220:80'
}
// 请求超时 请求头
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = window.localStorage['token']; //token存储在浏览器
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    })

// 响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况    
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                case 401:
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                    break;
                case 403:
                    Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token                    
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    setTimeout(() => {
                        router.replace({
                            path: '/login',// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                // 404请求不存在                
                case 404:
                    Toast({
                        message: '地址不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示                
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
);

/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, params)        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}
/**
 * 封装patch请求
 * @param url
 * @param params
 * @returns {Promise}
 */
export function patch(url,params){
  return new Promise((resolve,reject) => {
    axios.patch(url,params)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

/**
 * put 请求
 * @param  url 
 * @param  params 
 */
export function put(url,params){
  return new Promise((resolve,reject) => {
    axios.put(url,params)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

api.js  

api.js相当于将常用的请求url封装提起，方便后期url更改，简化代码：

// 包装请求api . 使用： import { register } from '@/request/api';// 导入api接口
import {post,get,put,patch} from './http'

// users接口
export const register = params => put('/users',params) 
export const login = params =>post('/users',params)

main.js中引入

import axios from 'axios'
import {post,get,put,patch} from './request/http'

// 定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$get=get;
Vue.prototype.$put=put;
Vue.prototype.$patch=patch; 

vue中使用

      引入：

import { login } from '@/request/api'; // 导入自定义api接口

     使用login方法访问后台登录接口：

var userDto = {
                        phone: '12334453',
                        pwd: '235kadsjgfklajgoljghaslfjyo3342'
                    };
                    login(userDto).then(res => {
                        log.info('登录成功')
                        this.$router.push('/dosomething/sport')
                        this.$Message.info('登录成功')
                    },err=>{})

或者使用刚在main.js中直接定义的全局变量 $post方法：

this.$post('/users',userDto).then(res=>{
                        // ...
                    },err=>{})

都会引入当http.js中的post方法中

访问了post方法