Un article explique en détail comment différencier le projet selon la version de vue

Comment différencier selon les versions ? L'article suivant vous présentera la méthode de différenciation selon la version vue du projet. J'espère qu'il vous sera utile !

Récemment, lorsque j'initialisais et construisais un projet, j'ai rencontré un problème d'erreur de console, lib_exports.getCurrentInstance n'est pas une fonction. J'ai acquis quelques connaissances en cours de dépannage de ce problème : vue a de nombreuses versions, telles que 2.6.x, 2.7, 3.x Différentes versions de vue ont des différences d'utilisation et elles seront utilisées. dans différents projets. Pour différentes versions de Vue, en supposant qu'il existe un outil public qui doit être fourni à différents projets, comment l'outil peut-il être différencié selon les versions de Vue dans différents projets ? Vous pouvez d’abord réfléchir à la manière de le mettre en œuvre, puis continuer à lire en gardant vos questions à l’esprit. [Recommandations associées : tutoriel vidéo vuejslib_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', développement web front-end

】🎜🎜🎜

Dépannage préliminaire h2>🎜Comme vous pouvez le voir sur la capture d'écran de l'erreur, la cause directe est l'erreur de console provoquée par l'appel de la méthode getCurrentInstance dans la méthode useVModel de vueuse . À partir du code source de vueuse, vous pouvez voir que vueuse a importé la méthode getCurrentInstance depuis vue-demi. 🎜🎜Ensuite, regardez le code source de vue-demi, comme indiqué ci-dessous, et trouvez quelque chose qui ne va pas. La version de vue que j'utilise pour ce projet est vue2. Pourquoi isVue = truecode> dans le code ? De plus, <code>getCurrentInstance est intégré uniquement dans vue2.7 et vue3. Avant vue2.7, getCurrentInstance ne pouvait être utilisé que via @vue/composition-api<.>. 🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/63cb3af9e760c9e7b15d91f0aa39bae9-1.png" alt="Un article explique en détail comment différencier le projet selon la version de vue" chargement="lazy">🎜<h2 data-id="heading-2"><strong>Principe vue-demi</strong></h2>🎜<a href="https://www.php.cn/link/c65c5f98889255b931e271f8e6c79278" target="_blank" rel="nofollow noopener noreferrer" title="https://github.com/vueuse/vue-demi" ref="nofollow noopener noreferrer"><code>vue-demi🎜 est également pris en charge pour vue2 x. , bibliothèque d'outils d'écriture vue3.x, vueuse utilise cette bibliothèque pour atténuer certaines différences entre vue2.6.x, vue2.7 et vue3.x. 🎜🎜Regardez la section scripts du package.json de vue-demi et vous pouvez voir qu'il est configuré avec postinstall npm script hook, le hook postinstall sera exécuté après avoir exécuté la commande pnpm install. 🎜🎜🎜🎜nous Ensuite, regardez ce que fait node_modules/vue-demi/scripts/postinstall.js. Il essaiera d'abord de charger vue (require('vue')). Veuillez noter ici que si vous configurez un alias de vue dans vite ou webpack, tel que { find: /^vue$/, remplacement : '@xf/vue' },, ce n'est pas le cas pour le script. Il prend effet car le script est exécuté immédiatement après l'installation des dépendances. Le projet n'a pas encore été démarré et n'a rien à voir avec Vite. 🎜🎜Après avoir essayé de charger vue, il détermine la condition et exécute la méthode switchVersion. 🎜🎜🎜🎜switchVersion La principale tâche de la méthode est de copier différents contenus de configuration en fonction des paramètres de numéro de version transmis et de les remplacer dans le fichier cible. 🎜🎜🎜🎜if Il s'agit de vue2.5 ou vue2.6, puis il copie le contenu du code source suivant : 🎜🎜🎜🎜S'il s'agit de vue3, alors il copie le contenu du code source suivant : 🎜🎜🎜🎜vue-demi implémente un traitement différencié pour différentes versions de vue Le principe c'est comme ça. 🎜

Cause première et solution

🎜Retour au problème d'erreur de console dans le projet, cela est dû à vue-demi La vue dans le projet ne peut pas être reconnue, car le projet installé est <code>@xf/vue après que le code source de la vue a été modifié, et il n'y a pas de pnpm add vue. S'il n'est pas reconnu, vue-demi utilise la configuration par défaut (la configuration par défaut est la configuration vue3). 🎜🎜La vue que nous utilisons lors de l'exécution du code est vue2.5.X Si vous essayez import { getCurrentInstance } from 'vue', vous obtiendrez certainement une erreur. 🎜

La solution estvue-demi提供了手动切换vue版本配置的命令，我们给项目配置prepare的npm脚本：npx vue-demi-switch 2. Après la configuration, elle sera exécutée à chaque fois que les dépendances du projet seront installées, et le passage manuel à la configuration vue2 sera effectué.

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!