一文詳解項目中怎麼根據vue版本進行差異化處理

怎麼根據版本進行差異化處理？以下這篇文章為大家介紹一下根據專案裡的vue版本進行差異化處理的方法，希望對大家有幫助！

最近在初始化搭建一個專案時，遇到了一個控制台報錯問題，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'一定是會報錯的。

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

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是一文詳解項目中怎麼根據vue版本進行差異化處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！