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 相关文章推荐
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
微信小程序实现多张图片上传功能
Nov 18 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+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
投资合作协议书范本
2014/04/17 职场文书
校园文明倡议书
2014/05/16 职场文书
纪检监察建议书
2014/05/19 职场文书
设备售后服务承诺书
2014/05/30 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
叶问观后感
2015/06/15 职场文书
五一晚会主持词
2015/07/01 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书