項目中如何根據vue版本進行差異化處理

這篇文章主要介紹“項目中如何根據vue版本進行差異化處理”，在日常操作中，相信很多人在項目中如何根據vue版本進行差異化處理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”項目中如何根據vue版本進行差異化處理”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

初步排查

從報錯截圖中可以看到，直接原因是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'肯定是會報錯的。

解決方案就是vue-demi提供了手動切換vue版本配置的命令，我們給項目配置prepare的npm腳本：npx vue-demi-switch 2，配置好之后，每次安裝項目依賴時都會執行，手動切換到vue2配置。

到此，關于“項目中如何根據vue版本進行差異化處理”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！