一篇实现Vue集成axios，调用，跨域，配置多个跨域的javascript库，可以通过axios库快速高效的与后台进行文件上传等复杂功能交互。JavaScript库：Axios安装Axios：将命令提示符切换到项目目录，输入“npminstallvue-axios--save”进行安装。安装完成后，在main.js中粘贴如下内容：importaxiosfrom'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(错误）;}）;编程请求：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:[/*stringorregex*/],11,//生产环境是否生成sourcemap？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':''//请求时使用这个api26,}27,},28,'/kp':{29,target:'http://antiserver.kuwo.cn',//这里模拟的后台地址；你应该填你真实的后台接口30,ws:true,31,changOrigin:true,//允许跨域32,pathRewrite:{33,'^/kp':''//请求时使用这个api34,}35，}36，}37，38，}，39，}2。跨域调用方法：在原有axios开发api的基础上，在链接前加上pathRewrite的名称，如：programmaticrequest:this.$axios({method:'post',url:'/ks/user/12345',data:{firstName:'Fred',lastName:'Flintstone'}});可以实现跨域功能。配置多域：在我们实际开发中，经常需要调用开发的api链接可能不同（比如：图片链接api是a.com，天气链接是b.com），那么我们需要配置两个span调试区的时候。示例代码：40,module.exports={41,publicPath:"./",42,//构建时的输出目录43,outputDir:"dist",44,//放置静态资源的目录45,assetsDir:"static",46,transpileDependencies:[/*stringorregex*/],47,//是否为生产环境构建sourcemap？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,w??s:true,59,changOrigin:true,//允许跨域60,pathRewrite:{61,'^/image':''//请求62时使用这个api,}63,},64,'/wt':{65,target:'http://antiserver.kuwo.cn',//这里的后台地址是模拟的；你应该填你真实的后台接口66,ws:true,67,changOrigin:true,//允许跨域68,pathRewrite:{69,'^/wt':''//请求时使用这个apican70,}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是为了实现与后台的数据交互，真正发挥前端的作用。实现前后端分离，构建前后端数据交互通道。也可以去euiadmin.com获取源码，帮助理解。
