經過前幾天的努力，我們終於把指令系列的都介紹一遍了
那今天的話就要來與各位介紹一下 Vue 的套件：多國語系 - i18n

什麼是 vue-i18n？

vue-i18n 是一個可以將我們的 app 國際化的套件，藉由將 vue-i18n 導入至 vue，我們頁面的內容就可以按照我們的預設去選擇語言，並且也能在需要轉換時去轉換成其他語言。

簡寫概念

根據使用者不同所使用的語言、數字格式以及日期也不同，而 i18n 所採用的是「地區 Locale」資訊，而地區的資訊也是由特定編碼組合成的，可以得知目前所需要呈現的位置，通常會使用「語言編碼+區域編碼」的組合去呈現，舉三個常見的例子：

• en_US：英文 (語言) /美國 (語言)
• zh_TW：繁中 (語言) /台灣 (語言)
• ja_jp：日文 (語言) /日本 (語言)

其他語系代碼可參考： Language studies

引入套件

首先，我們先打開並進入此專案的終端機

cd [專案名稱]

就像這樣：

接者輸入指令：

vue add i18n

跑完後，系統會問說是否要繼續，這裡輸入 y 即可：

接者就需要一步步回答系統的問題囉：

? The locale of project localization.
(專案預設的地區)

? The fallback locale of project localization.
(設定當前地區的語言沒有詞彙時，要用什麼地區來代替)

? The directory where store localization messages of project. It's stored under src directory.
(語系的檔案要放在什麼資料夾)

：以上皆點選 Enter 即可。

? Enable legacy API (compatible vue-i18n@v8.x) mode ?
(是否啟用 legacy API)
(選擇 Yes 的話 mode 會設置為 legacy ，反之為 composition)

：此為選擇 yes 或 no。

檔案架構

可以看到我們的資料夾中多出了幾個 i18n 的檔案

• locales 資料夾：
  用來存放多國語系設定檔的資料夾，是我們在安裝時第三步驟中設定的資料夾。

• en.json：
  在 locales 資料夾底下的多國語系設定檔，檔案格式為 json

• i18n.js：
  將 locales 資料夾下所有 .json 格式的語系檔載入，並 export instance 出去，如後續有進階設定時，都將在此js 檔中做存取。

也有變動的檔案：

• main.js：
  整包專案載入 i18n，就能共用同樣的設定及 locales 底下的語系檔。
  

vue-i18n 用法

首先我們需要先定義語系檔，要注意他是 .json 格式的，物件需要 Key 值與 Value 值，Key 值是程式碼用到的值，而 Value 則是呈現在畫面中的值，除此之外，也能根據語意或與畫面相近的文字使用物件去分類：

接著，我們可以使用 t(key, locale) 的方式去替換原先的文字：

{
  "base_en_US": {
    "message": "hello i18n !!",
    "home": "home page",
    "add": "Add",
    "edit": "edit",
    "delete": "Delete",
    "status": "Status",
    "save": "Save",
    "search": "search",
    "cancel": "Cancel"
  },
  "base_zh_TW": {
    "message": "hello i18n !!",
    "home": "首頁",
    "add": "新增",
    "edit": "編輯",
    "delete": "刪除",
    "status": "狀態",
    "save": "儲存",
    "search": "搜尋",
    "cancel": "取消"
  }
}

假設以上程式碼為 en.json 的範例文字：base_en_US 為英文；base_zh_TW 為中文

• key：語系檔中 key 值
  
• locale：使用者所指定的語系，預設為全局的 locale 值
  

了解之後，我們就可以用 t(key, locale) 的寫法更改文字，
那我們明天也會與大家講解該如何呈現在網頁上！

那今天我們對於 vue-i18n 的介紹就到這裡結束了！
明天會與各位一起實作看看 vue-i18n 的語系切換喔