vue-cli-3.0 axios 配置

1. 安装 Axios

1. 安装

$ npm install axios
$ npm install vue-axios

2. 引入

import axios from 'axios'
import VueAxios from 'vue-axios'

// 通过use方法加载axios插件

Vue.use(VueAxios，axios);

###3. 请求 示例

this.$http.post(Url, {
    page: p
}).then((res) => {
     console.log(res);
}).catch((err) => {
    console.log(err);
});

2. 配置 代理请求（解决问题）

module.exports = {
    // 配置 axios 代理请求
    devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.3.215:8888',
                    // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                changeOrigin: true, 
                ws: true,
                pathRewrite: {
                    // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
                     '^/api': '/' 
                }
            }
        }
    },
};

3. 配置 axios 为 表单提交

1. 问题说明

    $axios.post(); post方法 提交数据到后台时，由于 提交的数据为 json对象，所以 PHP 的 $_POST 方法 接收不到 数据；
2. 解决方法

import Axios from 'axios';
import VueAxios from 'vue-axios';
import Qs from 'qs';  // 引入Qs，这个库是axios里面包含的，不需要再下载了

// 创建一个axios实例

var axios_instance = Axios.create({
    // config里面有这个transformRquest， 这个选项会在发送参数前进行处理。 这时候我们通过Qs.stringify转换为表单查询参数
    transformRequest: [function (data) {
        data = Qs.stringify(data);
        return data;
    }],
    // 设置Content - Type
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }    
})
Vue.use(VueAxios, axios_instance);