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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
node中koa中间件机制详解
Aug 22 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
antd form表单数据回显操作
Nov 02 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
全局安装 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封装的分页类与简单用法示例
2019/02/25 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
BootStrap 动态表单效果
2017/06/02 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
python删除文本中行数标签的方法
2018/05/31 Python
Python之循环结构
2019/01/15 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
说明书怎么写
2014/05/06 职场文书
结对共建工作方案
2014/06/02 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
二审答辩状范文
2015/05/22 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Golang中异常处理机制详解
2021/06/08 Golang
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
Python中异常处理用法
2021/11/27 Python