In einem Artikel wird ausführlich erläutert, wie das Projekt nach der Vue-Version unterschieden werden kann

Wie unterscheidet man nach Version? Der folgende Artikel stellt Ihnen die Differenzierungsmethode gemäß der vue-Version im Projekt vor. Ich hoffe, dass er für alle hilfreich ist!

Vor Kurzem bin ich beim Initialisieren und Erstellen eines Projekts auf ein Konsolenfehlerproblem gestoßen: lib_exports.getCurrentInstance ist keine Funktion Ich habe bei der Fehlerbehebung dieses Problems einige Erkenntnisse gewonnen: Vue hat viele Versionen, wie zum Beispiel 2.6.x, 2.7, 3.x. Verschiedene Vue-Versionen haben Unterschiede in der Verwendung und werden verwendet Angenommen, es gibt ein öffentliches Tool, das für verschiedene Projekte bereitgestellt werden muss. Wie kann das Tool entsprechend den Vue-Versionen in verschiedenen Projekten unterschieden werden? Sie können zunächst darüber nachdenken, wie Sie es umsetzen, und dann mit Fragen im Hinterkopf weiterlesen. [Verwandte Empfehlungen: vuejs-Video-Tutoriallib_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', Web-Frontend-Entwicklung

】🎜🎜🎜

Vorläufige Fehlerbehebung h2>🎜Wie Sie dem Fehler-Screenshot entnehmen können, ist die direkte Ursache der Konsolenfehler, der durch den Aufruf der Methode getCurrentInstance in der Methode useVModel von vueuse verursacht wird . Aus dem Vueuse-Quellcode können Sie ersehen, dass Vueuse die Methode getCurrentInstance von vue-demi importiert hat. 🎜🎜Dann schauen Sie sich den Quellcode von vue-demi an, wie unten gezeigt, und stellen Sie fest, dass etwas nicht stimmt. Die Vue-Version, die ich für dieses Projekt verwende, ist vue2. Warum ist isVue = true? Code> im Code? Darüber hinaus ist <code>getCurrentInstance nur in vue2.7 und vue3 integriert. Vor vue2.7 konnte getCurrentInstance nur über @vue/composition-api. 🎜🎜<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/63cb3af9e760c9e7b15d91f0aa39bae9-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="In einem Artikel wird ausführlich erläutert, wie das Projekt nach der Vue-Version unterschieden werden kann" loading="lazy">🎜<h2 id="strong-vue-demi-Prinzip-strong"><strong>vue-demi-Prinzip</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🎜 wird auch für vue2 unterstützt , vue3.x-Schreibwerkzeugbibliothek. Vueuse verwendet diese Bibliothek, um einige Unterschiede zwischen vue2.6.x, vue2.7 und vue3.x auszugleichen. 🎜🎜Schauen Sie sich den Abschnitt scripts von vue-demis package.json an und Sie können sehen, dass es mit postinstall konfiguriert ist npm script Hook, postinstall Hook wird ausgeführt, nachdem Sie den Befehl pnpm install ausgeführt haben. 🎜🎜🎜🎜uns Schauen Sie sich dann an, was node_modules/vue-demi/scripts/postinstall.js tut. Zuerst wird versucht, vue zu laden (require('vue')). Bitte beachten Sie hier, dass dies nicht der Fall ist, wenn Sie einen Vue-Alias ​​in Vite oder Webpack konfigurieren, z. B. { find: /^vue$/, replacement: '@xf/vue' }, Das Skript wird wirksam, da das Skript unmittelbar nach der Installation der Abhängigkeiten ausgeführt wird. Das Projekt wurde zu diesem Zeitpunkt noch nicht gestartet und hat nichts mit Vite zu tun. 🎜🎜Nachdem versucht wurde, vue zu laden, ermittelt es die Bedingung und führt die Methode switchVersion aus. 🎜🎜🎜🎜switchVersion Die Hauptaufgabe der Methode besteht darin, unterschiedliche Konfigurationsinhalte basierend auf den übergebenen Versionsnummernparametern zu kopieren und in der Zieldatei zu ersetzen. 🎜🎜🎜🎜if Es ist vue2.5 oder vue2.6, dann kopiert es den folgenden Quellcodeinhalt: 🎜🎜🎜🎜Wenn es vue3 ist, dann kopiert es den folgenden Quellcodeinhalt: 🎜🎜🎜🎜vue-demi implementiert eine differenzierte Verarbeitung für verschiedene Vue-Versionen Das Prinzip ist so. 🎜

Ursache und Lösung

🎜Zurück zum Konsolenfehlerproblem im Projekt, das liegt an vue-demi Der Vue im Projekt kann nicht erkannt werden, da das installierte Projekt <code>@xf/vue ist, nachdem der Vue-Quellcode geändert wurde und kein pnpm add vuevorhanden ist >. Wenn es nicht erkannt wird, verwendet vue-demi die Standardkonfiguration (die Standardkonfiguration ist die vue3-Konfiguration). 🎜🎜Der Vue, den wir beim Ausführen des Codes verwenden, ist vue2.5.X. Wenn Sie import { getCurrentInstance } from 'vue' versuchen, wird auf jeden Fall eine Fehlermeldung angezeigt. 🎜

Die Lösung istvue-demi提供了手动切换vue版本配置的命令，我们给项目配置prepare的npm脚本：npx vue-demi-switch 2 Nach der Konfiguration wird es bei jeder Installation der Projektabhängigkeiten ausgeführt und manuell zur vue2-Konfiguration gewechselt.

(Teilen von Lernvideos: Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonIn einem Artikel wird ausführlich erläutert, wie das Projekt nach der Vue-Version unterschieden werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!