Vue i18n 與 i18n Ally
5 min readMay 12, 2021
新公司的第二個專案很幸運的接到多語系的案子
雖然頁面靜態網站居多，其實也能用一包 JSON 解決我選擇了 Vue-i18n 來管理多語系
並搭配官網推薦的 i18n-Ally Extension 用視覺化介面管理翻譯檔案
文章架構
- Step1 Vue-i18n 安裝
- Step2 頁面上加入翻譯內容
- Step3 切換語系
- 完成範例
[補充] i18n-Ally 用法與 setting config
Step1 — Vue-i18n 安裝
其實這一段我沒有很想寫，想說大家看文件就超清楚了
如何安裝官網文件：
https://router.vuejs.org/zh/installation.html所以簡單帶過，以下安裝步驟：
方法1: npm install
npm install vue-i18n優點:
只安裝 module 剩下的 i18n.js 設定與語系檔案要自己加，所以會很清楚他是怎麼運作的，適合一開始不知道 i18n 怎麼設定的人，一步步了解他的運作方式。缺點：
每一隻檔案/資料夾/locale驗證都要自己設定，比較繁鎖。
方法2: Vue add (第二次寫的時候我就改用這個做法)
vue add i18n優點:
只幾分鐘，全部都幫你一次安裝好(default是全域引用)。缺點:
對於他幫你寫了什麼會有點搞不清楚。
成功透過 Vue add 將 Vue-i18n 加到專案中
會在你的目錄中看到新增的檔案
完成以上安裝步驟後，就可以在你的專案中使用囉！
Step2 — 在頁面上加上翻譯內容
目前安裝好的語言包只有 zh.json，所以要自己加另一個語系的 json 檔
語系檔的命名可以參考 iso-639 的標準
https://zh.wikipedia.org/wiki/ISO_639接著就可以開始在任何地方開始使用 i18n 如下圖所示：
Step3 — 切換語系
加上切換語系的 methods & class 樣式
以上簡單的多語系頁面就完成了！
Code SandBox 成果
[補充] — i18n-Ally 用法與 setting config
i18n-Ally 是 vue-i18n 推薦的 VScode extension
這個套件不僅僅可以看到目前 Vue 檔案上使用的翻譯字
在各個語系中顯示的是什麼文字，不用在到茫茫翻譯海中找你要的翻譯
側欄提供非常強大的
語系管理介面
可以一目了然的看到專案中的翻譯文件狀態
- 哪些已經翻譯
- 目前已翻譯的比例
- 翻譯文件結構
- 已經使用的翻譯
甚至可以在左側的功能欄中直接新增 / 修改 語系資料
i18n-Ally Setting 參數
不知道你沒有發現一個小亮點，雖然一樣是中文但使用中文的國家很多
例如：台灣 /香港/馬來西亞
i18n-Ally 提供 Setting 參數，可以自行設定符合專案的 VScode setting.json
以下為我自己在這個專案中用到的幾個 Setting 參數
透過 localeCountryMap，就可以將介面上的國旗換掉
如果改完之後沒有出現，建議可以重新開 vscode 或重新安裝這個套件就可以了。
更多 Setting 參考套件中的 Feature Contributions較複雜的檔名可以參考以下連結：
https://github.com/lokalise/i18n-ally/wiki/FAQ
