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 相关文章推荐
Jquery异步请求数据实例代码
Dec 28 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
javascript常用的方法整理
Aug 20 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
javascript实现滚轮轮播图片
Dec 13 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统计字符串中中英文字符的个数
2013/06/23 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Vue基础配置讲解
2019/11/29 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
四个太阳教学反思
2014/02/01 职场文书
《草原》教学反思
2014/02/15 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
学生吸烟检讨书
2014/09/14 职场文书
出国留学导师推荐信
2015/03/26 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书