使用 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.jscnZh.jsjp.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

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