項(xiàng)目中如何根據(jù)vue版本進(jìn)行差異化處理

這篇文章主要介紹“項(xiàng)目中如何根據(jù)vue版本進(jìn)行差異化處理”，在日常操作中，相信很多人在項(xiàng)目中如何根據(jù)vue版本進(jìn)行差異化處理問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”項(xiàng)目中如何根據(jù)vue版本進(jìn)行差異化處理”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

最近在初始化搭建一個(gè)項(xiàng)目時(shí)，遇到了一個(gè)控制臺(tái)報(bào)錯(cuò)問(wèn)題，lib_exports.getCurrentInstance is not a function，在排查這個(gè)問(wèn)題的過(guò)程中學(xué)到了一些知識(shí)：vue有很多個(gè)版本，如2.6.x、2.7、3.x，不同的vue版本存在使用差異，而不同的項(xiàng)目里會(huì)用到不同的vue版本，假設(shè)有一個(gè)公共工具需要提供給不同的項(xiàng)目使用，那么工具要如何根據(jù)不同項(xiàng)目里的vue版本進(jìn)行差異化處理呢？可以自己先想一下如何實(shí)現(xiàn)，然后帶著問(wèn)題思考繼續(xù)閱讀下去。

初步排查

從報(bào)錯(cuò)截圖中可以看到，直接原因是vueuse的useVModel方法中調(diào)用了getCurrentInstance方法導(dǎo)致的控制臺(tái)報(bào)錯(cuò)。從vueuse源碼里就能看到vueuse是從vue-demi導(dǎo)入了getCurrentInstance方法。

接著看vue-demi的源碼，如下圖，發(fā)現(xiàn)不對(duì)啊，我這項(xiàng)目用的vue版本是vue2，為什么代碼里的isVue = true？而且getCurrentInstance是vue2.7、vue3才內(nèi)置的，vue2.7之前只能通過(guò)@vue/composition-api去使用getCurrentInstance。

vue-demi原理

vue-demi是一個(gè)同時(shí)支持為vue2.x、vue3.x編寫(xiě)工具的工具庫(kù)，vueuse就是利用這個(gè)庫(kù)來(lái)抹平vue2.6.x、vue2.7、vue3.x之間的一些差異。

查看vue-demi的package.json的scripts部分，可以看到它配置了postinstall的npm script鉤子，postinstall鉤子會(huì)在你執(zhí)行pnpm install命令完成之后執(zhí)行鉤子。

我們接著看node_modules/vue-demi/scripts/postinstall.js做了些什么，它首先會(huì)去嘗試加載vue（require('vue')）。這里要注意一下，如果你在vite或者webpack中配置了vue別名，比如{ find: /^vue$/, replacement: '@xf/vue' },，對(duì)腳本這里是不生效的，因?yàn)槟_本是在安裝依賴(lài)后立即執(zhí)行的，這個(gè)時(shí)機(jī)還沒(méi)有啟動(dòng)項(xiàng)目呢，跟vite沒(méi)有關(guān)聯(lián)。

嘗試加載vue之后，就判斷條件執(zhí)行switchVersion方法。

switchVersion方法主要做的事情根據(jù)傳入的版本號(hào)參數(shù)，拷貝不同的配置內(nèi)容，替換到目標(biāo)文件中。

如果是vue2.5、vue2.6，那么它拷貝的是下面的源碼內(nèi)容：

如果是vue3，那么它拷貝的是下面的源碼內(nèi)容：

vue-demi實(shí)現(xiàn)針對(duì)不同vue版本進(jìn)行差異化處理的原理就是這樣子。

根本原因和解決方案

回到項(xiàng)目里的控制臺(tái)報(bào)錯(cuò)問(wèn)題來(lái)，這里是因?yàn)?code>vue-demi識(shí)別不到項(xiàng)目里的vue，因?yàn)轫?xiàng)目里安裝的是魔改vue源碼之后的@xf/vue，沒(méi)有pnpm add vue。識(shí)別不到，vue-demi就使用了默認(rèn)配置（默認(rèn)配置是vue3配置）。

代碼運(yùn)行時(shí)我們用的vue是vue2.5.X，嘗試import { getCurrentInstance } from 'vue'肯定是會(huì)報(bào)錯(cuò)的。

解決方案就是vue-demi提供了手動(dòng)切換vue版本配置的命令，我們給項(xiàng)目配置prepare的npm腳本：npx vue-demi-switch 2，配置好之后，每次安裝項(xiàng)目依賴(lài)時(shí)都會(huì)執(zhí)行，手動(dòng)切換到vue2配置。

到此，關(guān)于“項(xiàng)目中如何根據(jù)vue版本進(jìn)行差異化處理”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！