序言：
Axios是两个源自于vue非官方所推荐的两个用作与后端（Java、go、Python、PHP）展开统计数据可视化的JavaScript库，你能透过axios库加速高效率的与后端展开统计数据可视化，拉沙泰格赖厄县文档上载等繁杂机能。
JavaScript库：Axios
加装Axios：
将旧版本转换到工程项目产品目录输出”npm install vue-axios –save”展开加装，在加装完后在main.js黏贴如下表所示内容：
import axios from axios
Vue.prototype.$axios = axios
便完成加装。
初始化axios：
在加装完之后能直接参考axios非官方文档例子展开初始化，在官网的基础上将axios替换成this.$axios即可完成初始化。
例子：
简单请求：
this.$axios.get(/user?ID=12345) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
编程式请求：
this.$axios({ method: post, url: /user/12345, data: { firstName: Fred, lastName: Flintstone }});
所有的请求均完美支持axios非官方Api，在原有api的基础上只需要将axios替换为this.$axios，其他部分按照非官方例子即可。
怎样同时实现布吕马：
什么是布吕马：当两个请求url的协议、域名、端口三者之间任意两个与当前页面url不同即为布吕马。
在前端开发是解决布吕马是需要前端与后端展开共同解决的，特别实在调试开发阶段前端实用性布吕马是非常重要且有必要的。
在实用性布吕马是需要vue.config.js+axios展开联合开发，从而同时实现前端的布吕马能力，在后端没有实用性布吕马的情况下与后端同时实现统计数据可视化，加快开发进度。
1、 vue.config.js（如没有请在根产品目录新建），具体代码如下表所示（可直接拷贝）：
2、 // Vue.config.js 实用性选项
3、
4、 module.exports = {
5、 publicPath: “./”,
6、 // 构建时的输出产品目录
7、 outputDir: “dist”,
8、 // 放置静态资源的产品目录
9、 assetsDir: “static”,
10、 transpileDependencies: [ /* string or regex */ ],
11、 // 是否为生产环境构建生成 source map？
12、 productionSourceMap: false,
13、 devServer: {
14、 open: true,
15、 host: localhost,
16、 port: 8080,
17、 https: false,
18、 //以上的ip和端口是我们本机的;下面为需要布吕马的
19、 proxy: { //实用性布吕马
20、 /ks: {
21、 target: http://search.kuwo.cn, //这里后台的地址模拟的;应该填写你们真实的后台接口
22、 ws: true,
23、 changOrigin: true, //允许布吕马
24、 pathRewrite: {
25、 ^/ks: //请求的时候使用这个api就能
26、 }
27、 },
28、 /kp: {
29、 target: http://antiserver.kuwo.cn, //这里后台的地址模拟的;应该填写你们真实的后台接口
30、 ws: true,
31、 changOrigin: true, //允许布吕马
32、 pathRewrite: {
33、 ^/kp: //请求的时候使用这个api就能
34、 }
35、 }
36、 }
37、
38、 },
39、 }
2、怎样展开布吕马初始化：
在原有的axios开发的api基础上在链接前增加pathRewrite的名称如：
编程式请求：
this.$axios({ method: post, url: /ks/user/12345, data: { firstName: Fred, lastName: Flintstone }});
便可同时实现布吕马的机能。
实用性数个领域：
在我们实际的开发中往往需要调用开发的api链接可能不一样（例如：图片链接api是a.com、天气链接是b.com），那么我们调试的时候需要实用性两个布吕马。
示例代码：
40、 module.exports = {
41、 publicPath: “./”,
42、 // 构建时的输出产品目录
43、 outputDir: “dist”,
44、 // 放置静态资源的产品目录
45、 assetsDir: “static”,
46、 transpileDependencies: [ /* string or regex */ ],
47、 // 是否为生产环境构建生成 source map？
48、 productionSourceMap: false,
49、 devServer: {
50、 open: true,
51、 host: localhost,
52、 port: 8080,
53、 https: false,
54、 //以上的ip和端口是我们本机的;下面为需要布吕马的
55、 proxy: { //实用性布吕马
56、 /image: {
57、 target: http://a.com, //这里后台的地址模拟的;应该填写你们真实的后台接口
58、 ws: true,
59、 changOrigin: true, //允许布吕马
60、 pathRewrite: {
61、 ^/image: //请求的时候使用这个api就能
62、 }
63、 },
64、 /wt: {
65、 target: http://antiserver.kuwo.cn, //这里后台的地址模拟的;应该填写你们真实的后台接口
66、 ws: true,
67、 changOrigin: true, //允许布吕马
68、 pathRewrite: {
69、 ^/wt: //请求的时候使用这个api就能
70、 }
71、 }
72、 }
73、
74、 },
75、 }
此时如果我们需要展开跨域请求。
请求图片：
this.$axios({ method: post, url: /image/user/12345, data: { firstName: Fred, lastName: Flintstone }});
请求天气：
this.$axios({ method: post, url: /wt/user/12345, data: { firstName: Fred, lastName: Flintstone }});
注意：
1、 布吕马实用性指的是在本地运行npm环境中布吕马，在打包后还是需要服务器的支持和后端支持，直接打包上下并不会布吕马。
2、 在实用性数个布吕马时请注意首位名字必须一致。
例子：
基于EuiAdmin+axios同时实现布吕马与酷我音乐展开可视化，同时实现音乐播放器例子：
总结：
Vue软件系统axios为了能够在与后台同时实现统计数据可视化，真正发挥前端的作用。同时实现前后端分离，构建前后端统计数据可视化的通道，你
喜欢能点赞+评论+关注三联一波。
