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

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

---

1?? 開始前

警告其他人

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

升級(jí)到最新的Vue 2.7

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

花點(diǎn)時(shí)間

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

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

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

測(cè)試驅(qū)動(dòng)的遷移

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

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

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

輸入所有內(nèi)容

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

清理一切

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

使用Vite

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

---

2??先小步走

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

升級(jí)依賴

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

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

替換依賴項(xiàng)

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

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

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

---

3?? 開始遷移

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

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

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

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

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

小步驟

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

大步

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

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

import { ElButton } from 'element-plus'

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

最後一步

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

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

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