Vue-Cli 配置 axios，创建axios实例

安装axios

npm install axios -D

-S
即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D
即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

创建axios实例

在src下创建api文件夹并创建http.js、interface.js

http.js

import axios from 'axios'
// 创建axios实例
const service = axios.create({
    // baseURL: baseUrl, // api 的 base_url
    // baseURL: 'http://47.94.160.237:8888/', // api 的 base_url
    // baseURL: 'http://localhost:8080/', // api 的 base_url
    baseURL: 'http://localhost:8888', // api 的 base_url
    method: "post",
    timeout: 300000, // 请求超时时间
    headers: {
        "Content-Type": "application/json"
    },
    encode: "charset=utf-8",
    withCredentials: true, // 默认携带cookies
})
// request 拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.log(error) // for debug
        Promise.reject(error)
    }
)
// response 拦截器
service.interceptors.response.use(
    response => {
        return response.data
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default service

interface.js

import request from './http' // 使用实例

//get方法
export function contentDetail(params) {
  return request({
    url: '/superwbs-server/tech/contentDetail',
    method: 'get',
    params
  })
}

//post方法
export function postGetUserAll(params) {
  return request({
    url: '/superwbs-server/tech/contentDetail',
    method: 'post',
    data: params
  })
}

调用接口

import { contentDetail } from '@/api/interface' // 引入接口

export default {
  data(){
    return {};
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      let postData = {id:35} // 请求参数
      contentDetail(postData).then(data => {
        console.log(data);
      })
    },
  }
}

本文参考链接原文

原文未给出post方法的写法，本文在interFace.js已给出

如果不想使用实例调用axios可以用以下方法

vue-Cli main.js配置axios

main.js 示例

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.axios = axios
// 组件中通过使用this.axios调用

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

组件中调用

getUserAll() {
      this.axios.post('http://localhost:8080/user/login', {
        userName: 'admin',
        passWord: 'admin'
      }, {
        headers: {"Content-Type": "application/json"}
      }).then(function (response) {
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      });
}