最近在初始化搭建一个项目时,遇到了一个控制台报错问题,lib_exports.getCurrentInstance is not a function
,在排查这个问题的过程中学到了一些知识:vue有很多个版本,如2.6.x
、2.7
、3.x
,不同的vue版本存在使用差异,而不同的项目里会用到不同的vue版本,假设有一个公共工具需要提供给不同的项目使用,那么工具要如何根据不同项目里的vue版本进行差异化处理呢?可以自己先想一下如何实现,然后带着问题思考继续阅读下去。【相关推荐:vuejs视频教程、web前端开发】
初步排查
从报错截图中可以看到,直接原因是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配置。
以上就是一文详解项目中怎么根据vue版本进行差异化处理的详细内容,更多请关注php中文网其它相关文章!