使用 Vue I18n 讓網站支援多國語言

發表於 分類於

前陣子因為專案要使用 Vue I18n 的緣故，就上網看了幾篇教學文章，但小弟資質駑鈍看了幾篇還是學不會，於是乾脆跟著官方文件走一次，結果就順利完成了！看來學習一項新技術時，還是應該先參考官方文件呢，又學到了一課。

本文涵蓋以下內容

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

STEP 1：安裝套件

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

Vue I18n

安裝套件的步驟：

  1. 使用 NPM 安裝套件：npm install vue-i18n
  2. 導入 Vue I18n：import VueI18n from 'vue-i18n'
  3. 啟用套件：Vue.use(VueI18n)
1
2
3
4
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 等等。

1
2
3
4
5
6
7
8
9
// en.js
export default {
  message: 'hi',
};

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

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

1
2
3
4
5
6
7
8
// 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 裡面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 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() 方法來切換網站語系

範例程式碼：

Polacode vue-i18n

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