Vue 버전에 따라 프로젝트를 차별화하는 방법을 자세히 설명하는 기사입니다.

버전에 따라 어떻게 구별하나요? 다음 글에서는 프로젝트의 vue 버전에 따른 차별화 방법을 소개하겠습니다. 모두에게 도움이 되었으면 좋겠습니다!

최근에 프로젝트를 초기화하고 빌드할 때 lib_exports.getCurrentInstance가 함수가 아닙니다라는 콘솔 오류 문제가 발생했습니다. 이 문제를 해결하는 과정에서 몇 가지 지식을 배웠습니다. vue에는 2.6.x, 2.7, 3.x와 같은 다양한 버전이 있습니다. vue 버전마다 사용법 차이가 있으며 사용됩니다. 다른 프로젝트에 제공해야 하는 공개 도구가 있다고 가정할 때 다른 Vue 버전에 대해 다른 프로젝트의 Vue 버전에 따라 도구를 어떻게 구별할 수 있습니까? 먼저 이를 구현하는 방법에 대해 생각해 본 다음 질문을 염두에 두고 계속 읽어 보세요. [관련 권장사항: vuejs 비디오 튜토리얼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', 웹 프론트엔드 개발

】🎜🎜🎜

사전 문제 해결 h2>🎜오류 스크린샷에서 볼 수 있듯이 직접적인 원인은 vueuse의 <code>useVModel 메서드에서 getCurrentInstance 메서드를 호출하여 발생한 콘솔 오류입니다. . vueuse 소스 코드를 보면 vueuse가 vue-demi에서 getCurrentInstance 메서드를 가져온 것을 볼 수 있습니다. 🎜🎜그런 다음 아래와 같이 vue-demi의 소스 코드를 보고 잘못된 점을 찾으세요. 이 프로젝트에 사용하는 vue 버전은 왜 isVue = true인가요? 코드> 코드에 있나요? 게다가 <code>getCurrentInstance는 vue2.7과 vue3에만 내장되어 있습니다. vue2.7 이전에는 getCurrentInstance를 @vue/composition-api. 🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/63cb3af9e760c9e7b15d91f0aa39bae9-1.png" alt="Vue 버전에 따라 프로젝트를 차별화하는 방법을 자세히 설명하는 기사입니다." loading="lazy">🎜<h2 data-id="heading-2"><strong>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🎜는 vue2 x에서도 지원됩니다. , vue3.x 작성 도구 라이브러리인 vueuse는 이 라이브러리를 사용하여 vue2.6.x, vue2.7 및 vue3.x 간의 일부 차이점을 완화합니다. 🎜🎜vue-demi의 package.json의 scripts 섹션을 보면 postinstall로 구성되어 있음을 확인할 수 있습니다. npm 스크립트 후크, pnpm install 명령을 실행한 후 postinstall 후크가 실행됩니다. 🎜🎜🎜🎜us 그런 다음 node_modules/vue-demi/scripts/postinstall.js가 수행하는 작업을 살펴보세요. 먼저 vue(require('vue')) 로드를 시도합니다. vite 또는 webpack에서 { find: /^vue$/, replacement: '@xf/vue' },와 같은 vue 별칭을 구성하는 경우에는 해당되지 않습니다. 스크립트는 종속성이 설치된 직후에 실행되기 때문에 적용됩니다. 현재 프로젝트는 시작되지 않았으며 Vite와 관련이 없습니다. 🎜🎜vue 로드를 시도한 후 조건을 확인하고 switchVersion 메서드를 실행합니다. 🎜🎜🎜🎜switchVersion 이 메서드가 수행하는 주요 작업은 전달된 버전 번호 매개변수를 기반으로 다양한 구성 내용을 복사하고 이를 대상 파일에서 바꾸는 것입니다. 🎜🎜🎜🎜if vue2.5 또는 vue2.6인 경우 다음 소스 코드 내용을 복사합니다: 🎜🎜🎜🎜vue3인 경우 다음 소스 코드 내용을 복사합니다.🎜🎜🎜🎜vue-demi는 다양한 vue 버전에 대해 차별화된 처리를 구현합니다. 원리 이렇습니다. 🎜

근본 원인 및 해결 방법

🎜프로젝트의 콘솔 오류 문제로 돌아가서 이는 vue-demi vue 소스 코드를 수정한 후 설치된 프로젝트가 <code>@xf/vue이고 pnpm add vue가 없기 때문에 프로젝트의 vue를 인식할 수 없습니다. >. 인식되지 않으면 vue-demi는 기본 구성을 사용합니다(기본 구성은 vue3 구성입니다). 🎜🎜코드를 실행할 때 사용하는 vue는 vue2.5.X입니다. import { getCurrentInstance } from 'vue'를 시도하면 확실히 오류가 보고됩니다. 🎜

해결책은vue-demi提供了手动切换vue版本配置的命令，我们给项目配置prepare的npm脚本：npx vue-demi-switch 2. 구성 후 프로젝트 종속성이 설치될 때마다 실행되고 수동으로 vue2 구성으로 전환됩니다.

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 Vue 버전에 따라 프로젝트를 차별화하는 방법을 자세히 설명하는 기사입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!