vue版本进行差异化处理
怎么根据版本进行差异化处理?下面本篇文章给大家介绍一下根据项目里的vue版本进行差异化处理的方法,希望对大家有所帮助!
初步排查
从报错截图中可以看到,直接原因是vueuse
的useVModel
方法中调用了getCurrentInstance
方法导致的控制台报错。从vueuse源码里就能看到vueuse是从vue-demi
导入了getCurrentInstance
方法。
接着看vue-demi
的源码,如下图,发现不对啊,我这项目用的vue版本是vue2,为什么代码里的isVue = true
?而且getCurrentInstance
是vue2.7、vue3才内置的,vue2.7之前只能通过@vue/composition-api
去使用getCurrentInstance
。
vue-demi原理
vue-demi
是一个同时支持为vue2.x、vue3.x编写工具的工具库,vueuse就是利用这个库来抹平vue2.6.x、vue2.7、vue3.x之间的一些差异。
查看vue-demi
的package.json
的scripts
部分,可以看到它配置了postinstall
的npm script
钩子,postinstall
钩子会在你执行pnpm install
命令完成之后执行钩子。
我们接着看node_modules/vue-demi/scripts/postinstall.js
做了些什么,它首先会去尝试加载vue(require('vue')
)。这里要注意一下,如果你在vite或者webpack中配置了vue别名,比如{ find: /^vue$/, replacement: '@xf/vue' },
,对脚本这里是不生效的,因为脚本是在安装依赖后立即执行的,这个时机还没有启动项目呢,跟vite没有关联。
尝试加载vue之后,就判断条件执行switchVersion方法。
switchVersion方法主要做的事情根据传入的版本号参数,拷贝不同的配置内容,替换到目标文件中。
如果是vue2.5、vue2.6,那么它拷贝的是下面的源码内容:
如果是vue3,那么它拷贝的是下面的源码内容:
vue-demi
实现针对不同vue版本进行差异化处理的原理就是这样子。
根本原因和解决方案
回到项目里的控制台报错问题来,这里是因为vue-demi
识别不到项目里的vue,因为项目里安装的是魔改vue源码之后的@xf/vue
,没有pnpm add vue
。识别不到,vue-demi
就使用了默认配置(默认配置是vue3配置)。
代码运行时我们用的vue是vue2.5.X,尝试import { getCurrentInstance } from 'vue'
肯定是会报错的。
解决方案就是vue-demi
提供了手动切换vue版本配置的命令,我们给项目配置prepare的npm脚本:npx vue-demi-switch 2
,配置好之后,每次安装项目依赖时都会执行,手动切换到vue2配置。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbkhb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01