vue配置多代理服务接口地址操作


Posted in Javascript onSeptember 08, 2020

一、介绍

随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址。

二、代码

config/index.js文件中配置代理地址:

vue配置多代理服务接口地址操作

自己项目中定义所有接口api管理文件src/api/getData.js:

vue配置多代理服务接口地址操作

页面调用接口时xxx.vue

vue配置多代理服务接口地址操作

三、总结

1、vue使用配置多代理地址方式可以访问不同的项目地址,使用以上方法。

2、同时也是可以把所有接口通过一个统一的后台项目通过feign调用其他系统接口进行访问,使用该种方式只需要配置一个代理地址即可,同时也可以对所有接口调用进行监控,比如添加用户操作记录时就比较简单,只需要定义一个aop切面监控conroller中的方法即可。

补充知识:Vue解决跨域多个target问题(配置多个代理问题)

我就废话不多说了,大家还是直接看代码吧~

devServer: {
 	publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',
  proxy: {
  	//可以配置多个代理
   '/api': {
    target: 'http://192.168.0.201:9994',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/api': ''
    }
   },
   '/images': {
    target: 'http://baidu.com',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/images': ''
    }
   }
  }
 },

以上这篇vue配置多代理服务接口地址操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
js闭包实例汇总
Nov 09 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 #Javascript
JS删除对象中某一属性案例详解
Sep 08 #Javascript
vue全局使用axios的操作
Sep 08 #Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
You might like
PHP基础学习小结
2011/04/17 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
质量承诺书范文
2014/03/27 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
房产委托公证书
2014/04/08 职场文书
临时租车协议范本
2014/09/23 职场文书
公司出纳岗位职责
2015/03/31 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript