本文涵蓋以下內容
- 安裝 Vue I18n 套件
- 如何設定與導入語言翻譯檔案
- 在 HTML 或 Vue 元件的 Template 中該如何使用 Vue I18n
STEP 1:安裝套件
開場不囉嗦,先附上我大哥 官方文件
安裝套件的步驟:
- 使用 NPM 安裝套件:
npm install vue-i18n
- 導入 Vue I18n:
import VueI18n from 'vue-i18n'
- 啟用套件:
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
之中準備做使用了,以下是導入的步驟:
-
導入翻譯檔:
import langs from './assets/langs'
這裡直接導入資料夾名稱,指的就是導入目錄預設的
index.js
檔案 -
將語言選擇存進 LocalStorage:
const locale = localStorage.getItem('lang') || 'cnZh'
這個步驟可做可不做,它的作用如下:
用 LocalStorage 紀錄使用者所選擇的語系,這樣使用者就不需要在每次進入網站時,都得切換一次語言囉! -
建立一個 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 使用括號會出現錯誤,所以加上了點點,還煩請各位幫我忽略那個點
可以呈現出文字之後,我們要怎麼切換網站的語系呢?我們可以透過選單來切換語言,以下是實作步驟的說明:
- 在
data
新增語言選項的陣列資料:langs: ["cnZh", "en"]
- 使用
v-model
將<select>
的結果值與$i18n.locale
做綁定 - 在
<select>
標籤上綁定@change
事件,藉此呼叫setLocale()
方法來切換網站語系
範例程式碼:
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫