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