框架升級背景

公司目前業務迭代很快，且大部分的流量都在公眾號上。然而我們公眾號所使用的框架卻是3年前的Vue 1.0.16。面對Vue這3年來帶來的無數新特性，我們只能望洋興嘆：看得見，摸不著，因為升級這事看起來太難了。

經常可以聽到老同事、新同事對老框架頻頻吐槽，也聽到很多同學說升級太難了，完全不可能。

于是，我就尋思著整點事。

升級概況

我們的公眾號承載的是一個電商購物平臺，歷經3年多的版本迭代，積攢了無數的業務代碼，既臃腫又龐大，可謂是一個大型的應用程序了。這也是其他同學提到升級不可能的主要原因。

當前的Vue版本: v1.0.16, Vue—Router版本: v0.7.13.
升級后的目標版本:Vue: v2.6.10, Vue—Router: v3.1.3.

升級思路

因為Vue官方有對Vue 1.x遷移到更高版本的說明, 并且還提供了升級助手，那升級的事情完全依賴升級助手便可完成。不過事實是這樣嗎？

開始動手

下載好官方提供的”遷移工具“，然后在項目的master分支上檢出一個新的專門用來做升級的分支，我是這么命名的：update/vue2vue2.x。

好了，準備工作就緒，只需要執行”遷移工具“就可以。Let’s do it!

Holy Shit! 建議改進多達近900個！這工具居然只有提示沒有自動修復？這太出乎我的意外了！
這難辦了，問題太多了，難道要我一個個手動修復？不過我馬上發現，有不少Replace之類的提示，這家伙完全可以自己完成啊，不過這工具的作者比較懶，沒寫。那我就用這個工具幫我來完成大部分的工作吧。

修改遷移工具

遷移工具在Github上可以直接找到，然后打開源碼，閱讀，找到它的處理方式，然后修改其中實現，這個過程就不多說了，無非是找到匹配規則，然后讀文件，按照規則替換，再寫文件。我對一些明顯能夠自動替換的能力做了處理，比如上圖中的898號問題，那這個工具可以幫我自動完成這個能力的。

我的這個工具可能會幫到其它朋友，這里來列一下修改之后提供的能力：

- router.go更換為router.push - ready生命周期回調更改為mounted（這個使用要謹慎） - 更改v-for循環的解構順序，例如：v-for="(key, item) in provinceList" 可以自動替換為：v-for="(item, key) in provinceList" - 更改回調函數的調用方式，例如：Replace cutword 10 with cutword(10) - 更改三括號運算符為v-html，例如：Replace {{{content}}} with v-html="content" on a containing element - 等等等

大概修改了這么些文件：

我已將修改后的項目開源，需要使用的同學請自取，使用前請慎重。 > https://github.com/sahadev/vue-migration-helper

如果使用上有問題也可聯系我。需要使用調試的方式使用，正常方式目前有問題。

node index.js 項目地址

通過工具的自動調整，最終運行后的結果如下：

已從899個提示減少到243，解決了656個問題，解決占比73%，一共調整149個文件。已經縮短了大量的工作，接下里的問題就需要進行更精細化的調整或者手工操作了。而我接下來選擇的是手動修改。先讓自動修改的代碼跑起來。

運行自動修改后的代碼

首要做的應該是調整Vue的框架版本，那么我從官網上拿到了最新的Vue: v2.6.10與Vue-Router: v3.1.3進行替換，并開始運行。

果不其然，遇到了編譯問題：

如果使用我工具的朋友會遇到這個問題，這個地方為了不影響代碼的執行過程，讓使用者自行調整生命周期，追加了這個提示，我這里需要手動修改為mounted。

修改完成后，編譯成功：

但運行情況怎么樣呢？
Vue-tools已經偵測到了Vue的版本，但是界面上一片空白，這是什么情況？這種情況下，最好的辦法就是一步步替換，我找到了最新Vue的使用方式，并嘗試運行了一個Demo，然后看最小單位如何執行，可行的話，再進行移植。

逐步替換

因為項目太大又很老，這個排查的過程花費了很多的時間與精力。這是一個耐心細致的過程，在這個過程中幾次想放棄，但最后從結果來看是堅持下來了。這個每個人可能遇到的情況不一樣，就不專門提及這些瑣碎的事情了。

趟過了很多坑之后，主要的幾個頁面都跑起來了，展示正常，點擊事件正常，主交易流程可以跑通。到這里只是說主框架的坑趟完了，剩下的事情就是集結其他小伙伴分模塊實施，然后協調資源做最終回歸測試的過程了。

更新之前：

更新之后：

后話

協調資源做完回歸測試，還需要灰度發布到線上監控運行情況趨于穩定后才能在這個新的框架上繼續做業務開發，這更是一個漫長的過程，不過希望的曙光已經可以看見。

總結

以上是生活随笔為你收集整理的记一次Vue框架升级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。