本文带你了解Vue灰度发布

前言什么是灰度发布？百度百科的解释如下。?灰度释放是指一种可以在黑白之间平滑过渡的释放方式。AB测试是一种灰度发布方式，让一部分用户继续使用A，一部分用户开始使用B，如果有异议，逐步扩大范围，将所有用户迁移到B。灰度发布可以保证A的稳定性整体系统，在初始灰度阶段就可以发现问题并进行调整，确保其影响。?从上文可以看出，灰度发布的主要作用有：降低直接全量发布的影响，让小部分用户优先使用新版本，有问题及时修复,验证无大问题后全量发布新功能通过新旧版本数据对比，判断新版本是否需要全量发布。概述灰度发布有多种方式。到最后，你可以区分服务端、客户端和Web前端。没有最好，只有更适合您的业务场景。上面可以看到，常见的灰度发布方式有几种，各有优缺点。由于我们公司有完整的大数据AB测试方案，前端只需要关注接口返回的字段标识，就可以做具体的页面加载。Logic，今天重点讲一下如何在前端的Vue框架中做灰度发布。在Vue中，主要分为以下两种情况：组件级：组件级的动态控制只需要从后端返回相应的schemeID即可。页面级别：前端页面访问地址不变，AB测试标记字段与后端人员约定，前端根据该字段返回的不同内容加载相应的页面。新旧函数区分两个页面地址，跳转页面地址由后台控制。该方案的前端不需要太多改动，本文不再赘述。先来看看日常的处理方法。一个页面上可能有多个地方判断AB测试逻辑，或者同时进行多个AB测试。这样的页面代码逻辑复杂度比较高，而且不够干净易懂。当新增AB测试或者AB测试需要做决策时，修改代码的成本很高，降低了代码维护的效率。下面开始我们今天的正题，看看有哪些方法可以解决以上问题。如果组件层级只是两个小组件函数的简单灰度，可以直接用v-if处理如果有多个函数要同时测试，可以通过Vue元素通过添加一个特殊的isattribute来实现，根据接口获取或者其他前端计算获取currentTabComponent。页面级方案一：新入口页面分布添加新入口页面，将新旧版本页面升级为组件，入口页面添加接口查询，通过v-if还是通过Vue的元素添加一个特殊的is属性来加载页面组件。下面是通过接口查询代码的例子。通过接口预查询会带来一定的接口延迟加载，具体取决于接口的响应速度。我们也可以通过在URL中添加参数来获取。返回，避免接口查询。这里直接加载页面级组件这样会导致这个文件的大小增加。您可以将页面组件的加载方式改为异步组件，以提高页面加载速度。components:{'index-a':()=>import(/*webpackChunkName:"index-a"*/'./index-a'),'index-b':()=>import(/*webpackChunkName:"index-b"*/'./index-b')}方案2高阶组件方案从路由配置中的接口获取灰度标识数据进行路由分发。如果不想增加接口查询的开销，也可以从URL参数中返回标识数据。这种方法需要提前拼接好参数。高阶组件的好处是所有需要灰度的加载逻辑都在路由配置文件中，统一维护，组件可以复用。不需要为每个需要灰度的页面都添加一个入口文件。组件代码router.js配置{path:'originPath',component:()=>import('@/views/components/DynamicLoadComponent'),name:'originPath',props:(route)=>({renderComponent:newPromise((resolve,reject)=>{//根据路由的拼接参数获取加载页面if(route.query.testA){resolve(import('@/views/testA'));}else{resolve(import('@/views/testB'));}//或者根据接口getAPIData()返回的标识符动态加载页面.then((response)=>{if(response.testA){resolve(import('@/views/testA'));}else{resolve(import('@/views/testB'));}}).catch(reject);}),})}方案三动态Router.js介绍如果有大面积的页面替换，可以使用这种方法。比如后端开发语言的变化导致接口地址和返回的字段内容发生变化，所以会有一个过渡使用期。开发一个页面并上线一个页面后，可能有5个页面使用新的方案，5个页面仍然保留原来的方案。改造router.js，将原来的路由配置提取到default.js中，然后创建java.js编写新的方案路由配置，根据前端计算或者接口返回标识动态加载路由配置文件。从“vue”导入Vue从“vue-router”导入路由器从“@/config”导入{isHitJavaAPI}Vue.use(Router)constrouter=newRouter({mode:'history'})constcomputedRouterDirectory=(routeFile)=>{让路由器配置；constrequireRouter=require.context('.',false,/\.js$/);routerConfig=requireRouter.keys().filter(file=>file===`./${routeFile}.js`)[0];如果(routerConfig){routerConfig=requireRouter(routerConfig)routerConfig.default&&router.addRoutes(routerConfig.default);}}if(isHitJavaAPI()){computedRouterDirectory('java')}else{computedRouterDirectory('default')}isHitJavaAPI方法是命中灰度逻辑。如果前端在这里做灰度，可以根据deviceID或者UA来计算。如果这是调用接口获取方案，需要改为同步调用。小结本文主要介绍几种页面级别的灰度方案。每种方案的试用场景各有优缺点。比如新增一个入口文件，主要是针对页面变化较大，当前项目只有一个在进行中。灰度测试；高层组件适用于当前项目正在进行的多次灰度测试，组件可以复用；动态加载路由配置文件主要针对目前项目中的大型页面UI或逻辑替换灰度测试；通过以上几种方案，可以大大提高代码的可维护性，灰度逻辑和业务代码逻辑脱钩。当灰度测试没有问题需要全面上线时，我们只需要修改入口逻辑即可。在业务代码中逐一修改灰度逻辑。除了本文介绍的几种方法外，还有其他的加载方式，比如通过路由钩子函数拦截后动态跳转，或者向后端请求，后端做重定向处理等，每种方式都有自己的优缺点，就看是不是最适合你当前场景的方案了。如果你有其他的打算，欢迎留言与我们沟通哦~