昨天（Day 12）才剛完成「網站會自動寄信提醒」的功能，我就突然想到一個問題，如果有人看不懂中文，這個網站要怎麼用？不是會很不方便嗎?所以我希望能讓我的小網站能夠支援「中英文切換」！至於為什麼要做多語言？以前寫程式時，所有畫面上的文字都是直接寫死在元件裡，例如：健康任務追蹤、新增等等，雖然這樣在中文環境下完全沒問題，但如果要改成英文版，就得一個一個檔案打開去手動改字，還要維護兩份程式碼，就會讓整個維護或運作超級麻煩。
而多語言（i18n）的好處，就是把「字」和「程式」分開，讓程式只負責邏輯，遇到要顯示的地方，用 $t('key') 去拿文字。把不同語言的文字，集中收納在翻譯字典（json 檔）裡。也就是說，程式碼像一本書的頁數，固定不變。而字典像翻譯員，則是負責決定用中文講還是英文講，不但支援多語言，也讓專案更有彈性，未來要加更多語言或改 UI，都不用擔心大改動。
想使用這項技術，只需要五步驟就可以搞定 i18n：

1. 安裝套件
2. 建立 i18n 插件
   我在 src/plugins/i18n.js 裡寫了邏輯：
   優先用 localStorage（記錄使用者上次選的語言）
   如果沒有，就偵測瀏覽器語言（navigator.language）
   再不行就預設中文（zh）
   最後把 i18n 實例匯出，並提供一個 setLanguage(lang) 函式，方便切換語言時更新 localStorage 與 。
3. 掛載到 main.js這樣整個網站的元件都能用 $t()。
4. 建立翻譯字典
   我新增兩個檔案：
   src/locales/zh.json：中文翻譯
   src/locales/en.json：英文翻譯
5. 語言切換器
   我做了一個小元件 LangSwitch.vue，放在 Header.vue 的導覽列右邊。
   用 下拉選單，選 中文 或 English，就會觸發 setLanguage()，存進 localStorage，下次重開網站還是維持上次選的語言。
   成果驗收長這樣：　
   
   
   首頁（Home）：切換成英文後，馬上看到標題變成 Habit Tracker，副標也換成 Build big habits with small tasks，新增任務的輸入框變成英文 placeholder，刪除按鈕也變成 Delete。
   使用說明（About）：整頁都會翻譯：Basic Operations、Data Storage、FAQ，全都自動切換。我甚至還測試了一下：關掉瀏覽器再打開，語言偏好還在，代表 localStorage 有成功發揮作用。這感覺就像我的網站突然學會「雙語對話」了，能用不同語言和使用者交流，真的很有「國際化產品」的感覺。期待明天的文章吧！