交互接收端的UI组件如何兼容Vue2和Vue3？相应的，这些交互也需要呈现在观看端。为了让保利微云的直播观看页面和客户定制的观看页面能够方便的接入这些功能，我们将交互功能做成了一个SDK，即交互接收端SDK。交互接收器SDK严格按照逻辑与UI分离的原则开发。基于逻辑层，可以开发不同界面的UI，甚至是不同技术栈的UI。默认UI基于Vue.js2.6开发。众所周知，Vue.js3.x已经正式发布。如果这套基于Vue.js2.6开发的UI组件用在Vue.js3.x项目中，会报错；如果重新开发一套可以适配Vue.js3.x的UI组件，需要维护两套代码，不利于后续功能的迭代更新。本文主要讲述如何在一段代码的基础上构建两个版本的Vue.js组件，以适配Vue.js2.6和Vue.js3.x（以下分别为Vue.js2.6和Vue.js3.x分别简称为Vue2和Vue3）。Vue2和Vue3兼容架构介绍在原有代码的基础上编译构建Vue2和Vue3包。优点：后续功能增加或优化，交互功能源码只需要改动一次。缺点：无法引用不兼容Vue2和Vue3的UI组件库。不能使用Vue2、Vue3不兼容的语法，包括Vue3的新特性。搭建UI组件项目的Vue3构建环境原UI组件项目目录结构如下：目录ui目录vue2目录build目录src文件package.json..为了搭建Vue3构建环境，在ui目录并添加vue2复制该目录下除src之外的所有配置文件。目录结构如下：目录ui目录vue2目录构建目录src文件package.json...目录vue3目录构建文件package.json...接下来修改vue3目录下的配置文件，将package中的vue更新为3.1。json，安装相同版本的@vue/compat和@vue/compiler-sfc，升级vue-loader到16以上"dependencies":{-"vue":"^2.6.12",+"vue":"^3.1.0",+"@vue/compat":"^3.1.0",-"vue-loader":"15.9.7"+"vue-loader":"16.0.0"...},"devDependencies":{+"@vue/compiler-sfc":"^3.1.0"}在Webpack的构建配置中为vue设置别名@vue/compat后，可以在Vue3中检测到不兼容的代码片段。设置webpack入口文件路径指向src目录下的源码。constsrcDirname=path.resolve(__dirname,'../../vue2/src');module.exports={entry:path.join(srcPath,'main.js'),resolve:{别名:{vue:'@vue/compat','@':srcDirname}},...}至此环境搭建完成。处理代码兼容性问题运行项目后，打开demo页面还是有问题，控制台出现异常信息。这些问题需要先修复，项目才能正常运行。问题主要有以下几个原因：（更多兼容性问题请参考官方文档）Vue2和Vue3分别通过extend和createApp创建节点。在Vue3中，不能修改$options属性。Vue3不支持过滤器。Vue3不支持2.6以下的槽语法。Vue3不支持全局方法$setlifecycledestroy和beforeDestroy。在Vue3中，更名为unmounted和beforeUnmount。Vue2和Vue3分别通过extend和createApp创建节点。对于不能同时在Vue2和Vue3上运行的代码，可以通过判断版本号写两套代码importVuefrom'vue';functionisVue3(){returnVue.version.startsWith('3.');}if(isVue3()){//Vue3环境代码constTipApp=Vue.createApp(SubmitTip,propsData);TipApp.mount(wrapContain);//业务代码...}else{//Vue2环境代码constComponet=Vue.extend(SubmitTip,propsData);constTipApp=newComponet({propsData});TipApp.$mount(wrapContain);//业务代码...}$options属性在Vue3中不能修改原??因：$options在Vue2中可以动态修改，但是在Vue3中$options属性只能读取，不能修改。解决方法：将原本放在$options中的逻辑代码移到data()中。//原来的写法exportdefault{$i18n:null,provide(){//初始化多语言实例this.$options.$i18n=newI18n(this.$options.langs);//设置响应式语言属性this.$options.$i18n.updateLocale(()=>this.lang);返回{getI18n:()=>this.$options.$i18n};},...}//替代写法exportdefault{data(){return{_i18n:null}}provide(){//初始化多语言实例this._i18n=newI18n(this.langs);//设置响应式语言属性this._i18n.updateLocale(()=>this.lang);返回{getI18n:()=>this._i18n,};},...}Vue3不支持过滤器filter可以使用方法代替过滤器。例如：
