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 相关文章推荐
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
全局安装 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP中设置时区方法小结
2012/06/03 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JS解析XML实例分析
2015/01/30 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python实现的简单猜数字游戏
2015/04/04 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
城市规划毕业生求职信
2013/10/10 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Redis可视化客户端小结
2021/06/10 Redis
利用 JavaScript 构建命令行应用
2021/11/17 Javascript