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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
javascript数组去重小结
2016/03/07 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python标准库之collections包的使用教程
2017/04/27 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
新郎父亲婚宴答谢词
2014/01/11 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
会计专业自我评价
2014/02/12 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
先进班组材料范文
2014/12/25 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
小学校园广播稿
2015/08/18 职场文书