iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

一個活了六年的 Vue 2 後台,升級到 Vue 3 的那兩年 系列

一個活了六年、還在線上跑的 Vue 2 後台,怎麼升級到 Vue 3。這不是「我怎麼重構」的英雄故事,是我在團隊裡近距離看完整場升級的觀察筆記,用 git 紀錄與實測數字當證據。會寫:升級前怎麼盤點、為什麼選重構而不是重寫、兩個 repo 一份程式碼怎麼共存、Webpack 換 Vite、UI 套件抽換、兩套權限系統並存、TypeScript 的 strict 為什麼設 false、表格與表單這種最痛的區塊怎麼搬、哪些東西決定不搬。也會寫不好看的部分:留下來的醜設計、四成的修改其實是在修自己造成的問題、以及重構為什麼本質上是做減法。想看真實大型專案升級長什麼樣的人,這裡沒有美化過的版本。

參賽天數 21 天 | 共 21 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11|建置設定裡那個沒人敢關的開關

模組二|選型、語言遷移與地基(Day 6–11) 模組二的最後一天,講建置。 先看舊專案的建置指令,一字不差: vue-cli-service test:u...

2026-08-16 ‧ 由 harryfan 分享
DAY 12

Day 12|同一個團隊做兩次遷移,第二次用了完全相反的策略

模組三|遷移執行法與驗收(Day 12–16) 一百個頁面要搬,第一個搬哪個? 我們做了兩次。而把兩次的第一天並排放在一起看的時候,我發現一件很有意思的事:...

2026-08-17 ‧ 由 harryfan 分享
DAY 13

Day 13|共存期間,舊系統的開發量比新系統還多

模組三|遷移執行法與驗收(Day 12–16) 重構最貴的一段,不是寫新系統,是新舊兩套同時活著的那段日子。我們的共存期超過一年。 而共存期間有一個月,我攤...

2026-08-18 ‧ 由 harryfan 分享
DAY 14

Day 14|遷移最爽的一刻,是確認某個模組不用搬

模組三|遷移執行法與驗收(Day 12–16) 有一組數字我每次看都覺得很療癒:其中一套系統的統計模組,從 52 個頁面變成 24 個。 不是因為砍功能,是...

2026-08-19 ‧ 由 harryfan 分享
DAY 15

Day 15|566 個 API,17 種命名方式,而我忍住沒有邊搬邊改

模組三|遷移執行法與驗收(Day 12–16) 我數了舊系統的 API 定義:566 個。 然後我數了它們的命名前綴:17 種。 光是「查詢」這一件事,就有...

2026-08-20 ‧ 由 harryfan 分享
DAY 16

Day 16|每 100 個測試站抓到的問題,有 1 到 2 個會溜到正式環境

模組三|遷移執行法與驗收(Day 12–16) 我們團隊修 bug 的時候,commit 訊息會標一個階段標籤:這個問題是在哪一關被抓到的。 六年下來,這變...

2026-08-21 ‧ 由 harryfan 分享
DAY 17

Day 17|重寫完,路由的程式碼從 328 行變成 704 行

模組四|核心系統改寫(Day 17–21) 先給一個看起來很糟的數字。 舊系統負責「路由與選單」的程式碼,散在四個檔案裡,合計 328 行。新系統重寫之後,...

2026-08-22 ‧ 由 harryfan 分享
DAY 18

Day 18|同一件事有兩套做法,比沒做還貴

模組四|核心系統改寫(Day 17–21) 這篇的主軸,是被我自己的實測推翻的。 我原本要寫的是「權限從路由級長到按鈕級」:舊系統只能控制「你能不能進這一頁...

2026-08-23 ‧ 由 harryfan 分享
DAY 19

Day 19|一個 182 行的檔案,決定了全站每一次請求的命運

模組四|核心系統改寫(Day 17–21) 舊系統的請求封裝是一個檔案、182 行、兩個攔截器、16 個 if 分支。 它負責的事情包括:帶 token、設...

2026-08-24 ‧ 由 harryfan 分享
DAY 20

Day 20|框架送你一台咖啡機,團隊自己買了三個濾杯

模組四|核心系統改寫(Day 17–21) Day 9 我丟過一個數字:框架附了一整套表格機制(用一份設定物件描述整張表格,也就是 schema 化那一套)...

2026-08-25 ‧ 由 harryfan 分享