一文详解项目中怎么根据vue版本进行差异化处理

Vue2023-04-2846 人已阅来源:网络

怎么根据版本进行差异化处理?下面本篇文章给大家介绍一下根据项目里的vue版本进行差异化处理的方法,希望对大家有所帮助!

一文详解项目中怎么根据vue版本进行差异化处理

最近在初始化搭建一个项目时,遇到了一个控制台报错问题,lib_exports.getCurrentInstance is not a function,在排查这个问题的过程中学到了一些知识:vue有很多个版本,如2.6.x2.73.x,不同的vue版本存在使用差异,而不同的项目里会用到不同的vue版本,假设有一个公共工具需要提供给不同的项目使用,那么工具要如何根据不同项目里的vue版本进行差异化处理呢?可以自己先想一下如何实现,然后带着问题思考继续阅读下去。【相关推荐:vuejs视频教程、web前端开发】

一文详解项目中怎么根据vue版本进行差异化处理

初步排查

从报错截图中可以看到,直接原因是vueuseuseVModel方法中调用了getCurrentInstance方法导致的控制台报错。从vueuse源码里就能看到vueuse是从vue-demi导入了getCurrentInstance方法。

接着看vue-demi的源码,如下图,发现不对啊,我这项目用的vue版本是vue2,为什么代码里的isVue = true?而且getCurrentInstance是vue2.7、vue3才内置的,vue2.7之前只能通过@vue/composition-api去使用getCurrentInstance

一文详解项目中怎么根据vue版本进行差异化处理

vue-demi原理

vue-demi是一个同时支持为vue2.x、vue3.x编写工具的工具库,vueuse就是利用这个库来抹平vue2.6.x、vue2.7、vue3.x之间的一些差异。

查看vue-demipackage.jsonscripts部分,可以看到它配置了postinstallnpm script钩子,postinstall钩子会在你执行pnpm install命令完成之后执行钩子。

一文详解项目中怎么根据vue版本进行差异化处理

我们接着看node_modules/vue-demi/scripts/postinstall.js做了些什么,它首先会去尝试加载vue(require('vue'))。这里要注意一下,如果你在vite或者webpack中配置了vue别名,比如{ find: /^vue$/, replacement: '@xf/vue' },,对脚本这里是不生效的,因为脚本是在安装依赖后立即执行的,这个时机还没有启动项目呢,跟vite没有关联。

尝试加载vue之后,就判断条件执行switchVersion方法。

一文详解项目中怎么根据vue版本进行差异化处理

switchVersion方法主要做的事情根据传入的版本号参数,拷贝不同的配置内容,替换到目标文件中。

一文详解项目中怎么根据vue版本进行差异化处理

如果是vue2.5、vue2.6,那么它拷贝的是下面的源码内容:

一文详解项目中怎么根据vue版本进行差异化处理

如果是vue3,那么它拷贝的是下面的源码内容:

一文详解项目中怎么根据vue版本进行差异化处理

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版本进行差异化处理的详细内容!