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 1

Day 1|342 個元件、1 個測試檔:一個活了六年的 Vue 2 後台

模組一|現況盤點與立案(Day 1–5) 先給你三個數字,全部是我自己跑指令量出來的: 342 個 Vue 元件,總共 103,870 行。全庫測試檔數量...

2026-08-06 ‧ 由 harryfan 分享
DAY 2

Day 2|先量體重再談減肥:把「這 code 很爛」翻譯成一份清單

模組一|現況盤點與立案(Day 1–5) 昨天說我接手後的第一件事不是寫程式,是盤點。今天把方法攤開。 「我覺得這 code 很爛」是一句沒有殺傷力的話。...

2026-08-07 ‧ 由 harryfan 分享
DAY 3

Day 3|兩套系統,20 個一模一樣的檔案,和幾個正在長歪的

模組一|現況盤點與立案(Day 1–5) 我手上有兩套後台管理系統:一套給內部營運用,一套給外部合作方用。它們原本是同一份程式碼——當年為了趕時間,有人把第...

2026-08-08 ‧ 由 harryfan 分享
DAY 4

Day 4|`this.baseUrl` 從哪來?全域魔法與那些沒人敢刪的東西

模組一|現況盤點與立案(Day 1–5) 昨天講的是看得見的重複:兩個 repo 裡 20 個一模一樣的檔案。今天講看不見的那種。 先給你一個謎題。假設你剛...

2026-08-09 ‧ 由 harryfan 分享
DAY 5

Day 5|「重構要多久?」這個問題有兩個相差三倍的答案

模組一|現況盤點與立案(Day 1–5) 模組一的最後一天,來談那個一定會被問的問題。 我沒有參與當初的排程討論,所以不知道對外報了多久。 但有件事很有意思...

2026-08-10 ‧ 由 harryfan 分享
DAY 6

Day 6|官方要 monorepo,我們把 93% 的程式碼留在根目錄

模組二|選型、語言遷移與地基(Day 6–11) 官方文件說主應用要放在 apps/ 底下。我們的主應用有 829 個檔案,全部待在根目錄的 src/。 這...

2026-08-11 ‧ 由 harryfan 分享
DAY 7

Day 7|一個檔名拼錯六年的 mixin,和 `this` 消失的意義

模組二|選型、語言遷移與地基(Day 6–11) 舊專案裡有一個 14 行的檔案,我第一次打開它的時候看了三分鐘,然後決定把它寫成一整篇。 它同時示範了三個...

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

Day 8|Vuex 裡有六個從沒打開過的空模組

模組二|選型、語言遷移與地基(Day 6–11) 這個專案是一個活了六年的 Vue 2 後台,我花了兩年把它升到 Vue 3。升級的時候,有三件事是被迫一起...

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

Day 9|換掉 UI 元件庫:8,023 個標籤,和一個我沒預料到的結果

模組二|選型、語言遷移與地基(Day 6–11) 這個專案是一個活了六年的 Vue 2 後台,我花了兩年把它升到 Vue 3。升級的時候 UI 元件庫也得換...

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

Day 10|`"strict": false, // 啟用嚴格模式`

模組二|選型、語言遷移與地基(Day 6–11) 標題不是我打錯。這是我在新專案的 TypeScript 設定檔裡看到的一行,一字不差: { &quot...

2026-08-15 ‧ 由 harryfan 分享