本文涵蓋以下內容

• 安裝 Vue I18n 套件
• 如何設定與導入語言翻譯檔案
• 在 HTML 或 Vue 元件的 Template 中該如何使用 Vue I18n

STEP 1：安裝套件

開場不囉嗦，先附上我大哥 官方文件

安裝套件的步驟：

1. 使用 NPM 安裝套件：npm install vue-i18n
2. 導入 Vue I18n：import VueI18n from 'vue-i18n'
3. 啟用套件：Vue.use(VueI18n)

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

就是這麼簡單，跟官方文件一模一樣呢 : )
等…等等…先別打叉叉，接下來的步驟就跟官方步驟不同哩！

STEP 2：設定各個語系的翻譯檔案

在官方文件的範例中，語系翻譯是直接寫在 main.js 裡面，但如果今天要翻譯的詞句有一定的數量的話，我們可以選擇另外再新增一個語系翻譯檔，然後再 import 進來使用。

例如：我在 src/assets 底下新增一個 langs 資料夾，裡面存放各個語言的翻譯檔案，像是 en.js、cnZh.js、jp.js 等等。

// en.js
export default {
  message: 'hi',
};

// cnZh.js
export default {
  message: '嗨',
};

新增好以上的語系翻譯檔案之後，我們可以再新增 langs/index.js 這個檔案，用處是把翻譯檔統整起來，方便一起做匯出。

// index.js
import cnZh from './cnZh';
import en from './en';

export default {
  cnZh,
  en,
};

翻譯檔的部分，使用 JavaScript 或 JSON 都可以，就只是物件與 JSON 格式之間透過 JSON.stringify() 與 JSON.parse() 轉來轉去而已

STEP 3：將翻譯檔導入專案之中

準備好翻譯檔案後，我們就可以將它們導入 main.js 之中準備做使用了，以下是導入的步驟：

1. 導入翻譯檔：import langs from './assets/langs'

   這裡直接導入資料夾名稱，指的就是導入目錄預設的 index.js 檔案

2. 將語言選擇存進 LocalStorage：const locale = localStorage.getItem('lang') || 'cnZh'

   這個步驟可做可不做，它的作用如下：
   用 LocalStorage 紀錄使用者所選擇的語系，這樣使用者就不需要在每次進入網站時，都得切換一次語言囉！

3. 建立一個 VueI18n 的實例，並放入 new Vue 裡面

   // Create VueI18n instance
   const i18n = new VueI18n({
     locale,
     messages: langs,
   });
   
   // instance
   new Vue({
     i18n,
     render: (h) => h(App),
   }).$mount('#app');

完成以上操作之後，我們就能開始使用 Vue I18n 的功能囉！

STEP 4：如何使用

Vue I18n 是透過 $t 這個符號加上 Mustache 標籤來呈現內容，例如：.{.{ $t('message') .}.}。
這個 message 就是剛才新增的翻譯檔的詞彙，它會呈現放在冒號(:)後面的 value。

因為 Markdown 使用括號會出現錯誤，所以加上了點點，還煩請各位幫我忽略那個點

可以呈現出文字之後，我們要怎麼切換網站的語系呢？我們可以透過選單來切換語言，以下是實作步驟的說明：

1. 在 data 新增語言選項的陣列資料：langs: ["cnZh", "en"]
2. 使用 v-model 將 <select> 的結果值與 $i18n.locale 做綁定
3. 在 <select> 標籤上綁定 @change 事件，藉此呼叫 setLocale() 方法來切換網站語系

範例程式碼：

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫