vue-cli-3.0 axios 配置 转

参考：[https://www.jianshu.com/p/b22d03dfe006]

以下是可行的

npm install --save axios vue-axios

store.js内容如下

以下是可行的

import Vue from 'vue' import Vuex from 'vuex'

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios);

Vue.use(Vuex)

export default new Vuex.Store({     state: {

    },     mutations: {

    },     actions: {

    } })

以上是可行的

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);

(adsbygoogle = window.adsbygoogle || []).push({});