vue-cli项目代理proxyTable配置exclude的方法


Posted in Javascript onSeptember 20, 2018

问题描述

如果是前后端分离的项目,本地开发环境需要访问mock,或者在调试时直接访问线上的接口,这时候就会有接口跨域的问题(mock不存在跨域问题,但是用这个方法配置起来方便,姑且算是一个问题)。以vue-cli生成的项目为例,需要配置 config/index.js 中的 proxyTable 属性,大概如下:

proxyTable: {
 '/pc/my/list/': {
 target: 'http://10.132.20.14:8083/mockjsdata/66',
 pathRewrite: {
  '^/pc/my/list/': '/pc/my/list/'
 }
 }
 },

配置规则在网上搜proxyTable就能搜到,这里不做赘述。今天要说的是另一个问题,请见下面的代码:

proxyTable: {
 '/m/userinfo/': {
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/userinfo/': '/mockjsdata/66/m/userinfo/'
 }
 },
 '/m/my/ajax/list/': {
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/my/ajax/list/': '/mockjsdata/66/m/my/ajax/list/'
 }
 },
 '/m/tkpreinterview':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/tkpreinterview': '/mockjsdata/66/m/tkpreinterview'
 }
 },
 '/m/preinterview':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/preinterview': '/mockjsdata/66/m/preinterview'
 }
 },
 '/m/interview':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/interview': '/mockjsdata/66/m/interview'
 }
 },
 '/m/checkLogin':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/checkLogin': '/mockjsdata/66/m/checkLogin'
 }
 },
 '/m/my/ajax/vdetail/':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/my/ajax/vdetail/': '/mockjsdata/66/m/my/ajax/vdetail/'
 }
 }
 },

明明一句(见下)就能解决的问题,为什么要写成这个样子?难道就是因为使用者没有学好?

proxyTable:{
 '/m':{
 target: 'http://10.132.20.14:8083/mockjsdata/66'
 }
 },

事情当然没这么简单。原因是,后端在设计接口时,没有把api和模板分开,都在一个命名空间下(比如,首页的地址是 /m/index)。这时候,如果按照上面那样配置,连模板接口也会被代理掉,所以只能一个一个的写,实在是前端在给后端背锅啊!那么有没有更优雅的办法呢?比如exclude之类的?

我们发现,实现代理功能的插件是http-proxy-middleware,在文档中我们发现了这一段:

proxy('**', {...}) matches any path, all requests will be proxied.
proxy('**/*.html', {...}) matches any path which ends with .html
proxy('/*.html', {...}) matches paths directly under path-absolute
proxy('/api/**/*.html', {...}) matches requests ending with .html in the path of /api
proxy(['/api/**', '/ajax/**'], {...}) combine multiple patterns
proxy(['/api/**', '!**/bad.json'], {...}) exclusion

注意最后一条,此插件是支持exclude的。以我们上面的例子来说,只要key的值写成类似 ['/m/**' , '!/m/index'] 这样的就行了。可是!你见过object的key是个array的吗?好吧,不??拢?苯涌丛绰搿?/p>

说明一下,我们的项目,之前用的vue-cli版本是2.8.2,我自己实验的版本是2.9.1,这两个版本是不一样的,咱一个一个说。

先说2.9.1版本生成的,此版本没有了 build/dev-server.js 以及类似的文件,直接用了 webpack-dev-server。在看过源码后,我发现,webpack-dev-server的proxy接收参数其实是个数组,并且里面有一个context值,就是来传递http-proxy-middleware第一个参数的。所以,我们不用傻傻的按照vue-cli给的不敢动,只要改成下面的就行了

proxyTable: [{
 context: ['/m/**','!/m/index'],
 target: 'http://10.132.20.14:8083/mockjsdata/66'
 }],

OK,这个版本是比较简单的,下面说一下2.8.2版本的

这个版本有个 build/dev-server.js 文件,大概在 50 行左右,有类似下面的代码

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
 options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context, options))
})

可以看到,这里的context只考虑到了string的情况,没办法,我们自己来动手改一下吧,加个方法

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
 options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context.split(','), options))//context -> context.split(',')
})

这样你传进来的key都会变成数组。然后在proxyTable的配置里只要写成如下即可

proxyTable:{
 'm/**,!/m/index':{
 target: 'http://10.132.20.14:8083/mockjsdata/66'
 }
 },

可以了,现在两个版本都搞定了,强迫症的心好累,我去歇会。。。回头再优化吧

以上这篇vue-cli项目代理proxyTable配置exclude的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
arguments对象
Nov 20 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
Node批量爬取头条视频并保存方法
Sep 20 #Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 #Javascript
vue 优化CDN加速的方法示例
Sep 19 #Javascript
Vue前后端不同端口的实现方法
Sep 19 #Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 #Javascript
浅谈React之状态(State)
Sep 19 #Javascript
jQuery使用each遍历循环的方法
Sep 19 #jQuery
You might like
解析php中die(),exit(),return的区别
2013/06/20 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
Javascript中神奇的this
2016/01/20 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python中requests小技巧
2017/05/10 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
个人综合鉴定材料
2014/05/23 职场文书
法人委托书
2014/07/31 职场文书
优秀党员推荐材料
2014/12/18 职场文书