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

以下是一些對我們有幫助的建議。由於 Vue 2 仍然運(yùn)作得很好，所以你最好花點(diǎn)時間來簡化遷移，而不是倉促完成，破壞你的應(yīng)用程式並摧毀你的道德！

---

1?? 開始前

警告其他人

事情一定會破裂，哪怕是一點(diǎn)點(diǎn)。你最好確保其他團(tuán)隊(duì)沒問題。

升級到最新的Vue 2.7

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

花點(diǎn)時間

這可能是一項(xiàng)相當(dāng)大的工作，因此您最好預(yù)計在很長一段時間內(nèi)降低風(fēng)險。而且，它幫助我們（開發(fā)者）保持道德！計劃幾週甚至幾個月，因?yàn)槟阒朗颤N時候開始，但你不知道什麼時候完成......最後，最好每週花一些時間，這樣任何中斷都不會造成災(zāi)難性的。

創(chuàng)建團(tuán)隊(duì)

如果可能的話，不要只依賴一個開發(fā)人員，因?yàn)檫@是一項(xiàng)令人筋疲力盡的任務(wù)。此外，您需要快速回饋和合併循環(huán)，因?yàn)樵S多變更會影響整個程式碼庫，並且可能每天都會產(chǎn)生衝突。不用處理這個就已經(jīng)夠難的了！

測試驅(qū)動的遷移

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

• 單元測試不是很有用，因?yàn)樗鼈兺ǔy試與 Vue 沒有真正關(guān)聯(lián)的東西（例如僅“純 JS”函數(shù)），所以我們沒有關(guān)注它們
• 使用 vue-test-utils 進(jìn)行組件測試遷移起來很痛苦，最後我們甚至不得不禁用其中一些
• 端對端測試是最有價值的，因?yàn)樗灰蕾嚾魏?JS 或 Vue 內(nèi)部，一旦應(yīng)用程式中出現(xiàn)錯誤就會失敗

總之，最好的方法是創(chuàng)建所謂的“冒煙測試”，您只需在應(yīng)用程式中使用您能想到的最基本的場景進(jìn)行導(dǎo)航即可。讓它們保持簡單，這樣它們就會很快，因?yàn)槟阍皆缱屗鼈冞\(yùn)行，它們就會越有用。如果它們在合併之前運(yùn)行（例如在 CI 中），則會獲得獎勵點(diǎn)。

輸入所有內(nèi)容

TypeScript 有一點(diǎn)幫助，但 Vue 2 對它的支援仍然很差。使用 TypeScript 仍然是一個好主意，但可能沒有太大幫助；一旦使用 Vue 3，設(shè)定語法將是你最好的朋友！

清理一切

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

使用Vite

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

---

2??先小步走

目標(biāo)是在實(shí)際升級 Vue 本身時盡可能減少變更。

升級依賴

查看您使用的每個 Vue 相關(guān)依賴項(xiàng)，檢查是否有同時支援 Vue 2 和 Vue 3 的版本，然後升級到它。 Vue-demi 幫助許多外掛程式維護(hù)者實(shí)現(xiàn)了它，所以它很有可能可用。

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

替換依賴項(xiàng)

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

需要時使用猴子補(bǔ)丁

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

---

3?? 開始遷移

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

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

按照說明使用「遷移建置」（也稱為相容模式）將 Vue 2 替換為 Vue 3。

關(guān)閉所有可用的標(biāo)誌，以便應(yīng)用程式的運(yùn)行幾乎與版本 2 相同。

檢查是否沒有重大變更影響您的應(yīng)用，或修復(fù)它們。

小步驟

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

大步

有些依賴項(xiàng)不提供捷徑。在我們的例子中，將 UI 庫從 ElementUI (Vue 2) 遷移到 ElementPlus (Vue 3) 很困難，無法分成更小的步驟。我聽說 Vuetify 更難。為此，你必須堅(jiān)強(qiáng)、有耐心，並花時間一次完成這一切。也許在你的團(tuán)隊(duì)日曆中留出整整一周的時間！

請記住，您仍然可以覆寫在執(zhí)行時間匯入的每個元件的相容性行為：

import { ElButton } from 'element-plus'

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

最後一步

開啟每個標(biāo)誌後，就可以刪除遷移建置了。希望您現(xiàn)在不會發(fā)現(xiàn)新的意外問題！

別忘了慶祝，你應(yīng)得的！ ？

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