[TOC] > [參考](https://www.jianshu.com/p/fed90cc60246) ### src/plugins/axios.js 設置 ``` "use strict"; import Vue from "vue"; import Axios from "axios"; import VueAxios from "vue-axios"; import { message } from "ant-design-vue"; import Qs from "qs"; //統一處理返回 Axios.interceptors.response.use( response => { //處理 非200 if (response.status !== 200) { message.error(response.statusText); } //處理失敗 if (response.data.code===0){ message.error(response.data.msg) } // 對響應數據做某事 return response.data; }, error => { // 返回錯誤時做某事 message.error(error); } ); let config = { // config里面有這個transformRquest， 這個選項會在發送參數前進行處理。 這時候我們通過Qs.stringify轉換為表單查詢參數 transformRequest: [ function(data) { data = Qs.stringify(data); return data; } ], // 設置Content - Type headers: { "Content-Type": "application/x-www-form-urlencoded" }, timeout: 60000, baseURL: process.env.BASE_URL }; const axios_instance = Axios.create(config); Vue.use(VueAxios, axios_instance); ``` ### 并在main.js 中引入 `import "./plugins/axios";` ### vue.config.js 設置代理 ``` devServer: { open: false, //打開瀏覽器窗口 // proxy: 'http://192.168.0.59:8003/' proxy: { //配置跨域 '/api': { target: "http://192.168.0.59:8003/api", ws:true, changOrigin:true, pathRewrite:{ '^/api':'' } } } }, ``` ### 管理 api `src/api/api.js` ``` import axios from "axios"; //獲取所有新聞 export const newslist=(current,page)=>{ return axios.get("/api/news/lists", { params:{page:page }}); }; ``` 調用 ``` import {newslist} from '@/api/api.js' newslist(this.current,this.defaultPageSize).then(res=>{ console.log(res); }).catch(err=>{ this.$message.error(err); }) ```