大約一年前，我們終于從 Vue 2 遷移到 Vue 3。距其正式生命周期還有 6 個月。當時，我們的應用程序有大約 100 個頁面和 300 個組件，并使用了一些與 Vue 相關的經(jīng)典依賴項：Vue-router、Pinia（和 Pinia ORM）、Vue-i18n、TipTap、ElementUI（ElementPlus for Vue 3）

以下是一些對我們有幫助的建議。由于 Vue 2 仍然運行得很好，所以你最好花點時間來簡化遷移，而不是倉促完成，破壞你的應用程序并摧毀你的道德！

---

1?? 開始之前

警告其他人

事情肯定會破裂，哪怕是一點點。你最好確保其他團隊沒問題。

升級到最新的Vue 2.7

顯然，由于大多數(shù)新功能都在 Vue 2.7 中提供，并且是向后兼容的，如果您還沒有，那么趕上是很重要的。遷移到 Vue 3 時，您仍然可以享受它的功能。遷移的步驟也會更小。

花點時間

這可能是一項相當大的工作，因此您最好預計在很長一段時間內(nèi)降低風險。而且，它幫助我們（開發(fā)者）保持道德！計劃幾周甚至幾個月，因為你知道什么時候開始，但你不知道什么時候完成......最后，最好每周花一些時間，這樣任何中斷都不會造成災難性的。

創(chuàng)建團隊

如果可能的話，不要只依賴一個開發(fā)人員，因為這是一項令人筋疲力盡的任務。此外，您需要快速反饋和合并循環(huán)，因為很多更改會影響整個代碼庫，并且可能每天都會產(chǎn)生沖突。不用處理這個就已經(jīng)夠難的了！

測試驅(qū)動的遷移

一半的時間將用于測試整個應用程序，因此您最好盡可能將其自動化。根據(jù)我們的經(jīng)驗：

• 單元測試不是很有用，因為它們通常測試與 Vue 沒有真正關聯(lián)的東西（例如僅“純 JS”函數(shù)），所以我們沒有關注它們
• 使用 vue-test-utils 進行組件測試遷移起來很痛苦，最后我們甚至不得不禁用其中一些
• 端到端測試是最有價值的，因為它不依賴于任何 JS 或 Vue 內(nèi)部，并且一旦應用程序中出現(xiàn)錯誤就會失敗

總之，最好的方法是創(chuàng)建所謂的“冒煙測試”，您只需在應用程序中使用您能想到的最基本的場景進行導航即可。讓它們保持簡單，這樣它們就會很快，因為你越早讓它們運行，它們就會越有用。如果它們在合并之前運行（例如在 CI 中），則會獲得獎勵點。

輸入所有內(nèi)容

TypeScript 有一點幫助，但 Vue 2 對它的支持仍然很差。使用 TypeScript 仍然是一個好主意，但可能沒有太大幫助；一旦使用 Vue 3，設置語法將是你最好的朋友！

清理一切

這是顯而易見的，但是代碼中會發(fā)生很多變化，也會出現(xiàn)很多錯誤。一個簡單的 ESLint / Prettier 可以節(jié)省大量時間。如果您已經(jīng)有了它們，您可以在遷移的同時檢查 Vue 3 的新規(guī)則：https://eslint.vuejs.org/rules/

使用Vite

在開始遷移 Vue 之前，我們已經(jīng)從 Webpack 遷移到了 Vite，所以我不確定它有多大幫助，但由于它是今天的明確標準，一些插件甚至可能不會給出使用 Webpack 升級的說明。我想先這樣做比較安全，因為 Vite 支持 Vue 2，但相反 Vue 3 生態(tài)系統(tǒng)可能不支持 Webpack。

---

2??先小步走

目標是在實際升級 Vue 本身時盡可能減少更改。

升級依賴

查看您使用的每個 Vue 相關依賴項，檢查是否有同時支持 Vue 2 和 Vue 3 的版本，然后升級到它。 Vue-demi 幫助很多插件維護者實現(xiàn)了它，所以它很有可能可用。

例如，您可能想從 Vuex 遷移到 Pinia，它支持這兩個版本（Vuex 仍然需要小規(guī)模遷移）并且無論如何都是新標準。

替換依賴項

對于其他依賴項，您可能需要檢查是否有任何現(xiàn)代替代方案可以滿足您的需求。例如，我們用 vue-use 替換了 vue-mq。

需要時使用猴子補丁

我們必須務實，因此由于某些遷移比其他遷移更困難，我們最終創(chuàng)建了一個小的抽象層來修復它。例如，我們在 vue-i18n v9 上遇到了困難，它帶來了一些（有時沒有記錄的）重大更改。因此，我們最終創(chuàng)建了一個幫助程序，它公開了 $t 的自定義版本，以防止必須重寫每個組件（因為這個最常用的函數(shù)現(xiàn)在基本上沒有理由不接受“nullish”值）。換句話說，不要太完美主義！

---

3?? 開始遷移

現(xiàn)在艱苦的工作開始了。我們之前所做的一切都會減輕痛苦。這里沒有魔法，這可能是遷移中最困難的部分。

改變一切，但什么也改變不了

按照說明使用“遷移構建”（也稱為兼容模式）將 Vue 2 替換為 Vue 3。

關閉所有可用的標志，以便應用程序的運行幾乎與版本 2 一樣。

檢查是否沒有重大更改影響您的應用，或修復它們。

小步驟

逐步啟用每個標志并徹底測試應用程序。如果某些組件太難遷移，請記住您可以覆蓋其兼容性選項；因此，您最好合并所有內(nèi)容，但保留一些組件以便稍后遷移，而不是等待整個應用程序立即運行。不要試圖立即修復所有問題，要等幾天才能發(fā)現(xiàn)任何錯誤（并為您的心理健康充電）。

大步

一些依賴項不提供快捷方式。在我們的例子中，將 UI 庫從 ElementUI (Vue 2) 遷移到 ElementPlus (Vue 3) 很困難，而且無法分成更小的步驟。我聽說 Vuetify 更難。為此，你必須堅強、耐心，并花時間一次性完成這一切。也許在你的團隊日歷中留出整整一周的時間！

請記住，您仍然可以覆蓋在運行時導入的每個組件的兼容性行為：

import { ElButton } from 'element-plus'

ElButton.compatConfig = {
  FEATURE_ID_A: true // features can also be toggled at component level
}

最后一步

打開每個標志后，就可以刪除遷移構建了。希望您現(xiàn)在不會發(fā)現(xiàn)新的意外問題！

別忘了慶祝，你應得的！ ？

以上是我們?nèi)绾螐?Vue 遷移到 Vue 3的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！