框架升級背景
公司目前業務迭代很快，且大部分的流量都在公衆號上。然而我們公衆號所使用的框架卻是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，然後看最小單位如何執行，可行的話，再進行移植。
逐步替換
因爲項目太大又很老，這個排查的過程花費了很多的時間與精力。這是一個耐心細緻的過程，在這個過程中幾次想放棄，但最後從結果來看是堅持下來了。這個每個人可能遇到的情況不一樣，就不專門提及這些瑣碎的事情了。
趟過了很多坑之後，主要的幾個頁面都跑起來了，展示正常，點擊事件正常，主交易流程可以跑通。到這裏只是說主框架的坑趟完了，剩下的事情就是集結其他小夥伴分模塊實施，然後協調資源做最終迴歸測試的過程了。
更新之前：
更新之後：
後話
協調資源做完迴歸測試，還需要灰度發佈到線上監控運行情況趨於穩定後才能在這個新的框架上繼續做業務開發，這更是一個漫長的過程，不過希望的曙光已經可以看見。