使用 Vue I18n 讓網站支援多國語言
前陣子因為專案要使用 Vue I18n 的緣故,就上網看了幾篇教學文章,但小弟資質駑鈍看了幾篇還是學不會,於是乾脆跟著官方文件走一次,結果就順利完成了!看來學習一項新技術時,還是應該先參考官方文件呢,又學到了一課。
本文涵蓋以下內容
- 安裝 Vue I18n 套件
- 如何設定與導入語言翻譯檔案
- 在 HTML 或 Vue 元件的 Template 中該如何使用 Vue I18n
STEP 1:安裝套件
開場不囉嗦,先附上我大哥 官方文件
安裝套件的步驟:
- 使用 NPM 安裝套件:
npm install vue-i18n
- 導入 Vue I18n:
import VueI18n from 'vue-i18n'
- 啟用套件:
Vue.use(VueI18n)
1 | import Vue from 'vue'; |
就是這麼簡單,跟官方文件一模一樣呢 : )
等…等等…先別打叉叉,接下來的步驟就跟官方步驟不同哩!
STEP 2:設定各個語系的翻譯檔案
在官方文件的範例中,語系翻譯是直接寫在 main.js
裡面,但如果今天要翻譯的詞句有一定的數量的話,我們可以選擇另外再新增一個語系翻譯檔,然後再 import
進來使用。
例如:我在 src/assets
底下新增一個 langs
資料夾,裡面存放各個語言的翻譯檔案,像是 en.js
、cnZh.js
、jp.js
等等。
1 | // en.js |
新增好以上的語系翻譯檔案之後,我們可以再新增 langs/index.js
這個檔案,用處是把翻譯檔統整起來,方便一起做匯出。
1 | // index.js |
翻譯檔的部分,使用 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 裡面
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 使用括號會出現錯誤,所以加上了點點,還煩請各位幫我忽略那個點
可以呈現出文字之後,我們要怎麼切換網站的語系呢?我們可以透過選單來切換語言,以下是實作步驟的說明:
- 在
data
新增語言選項的陣列資料:langs: ["cnZh", "en"]
- 使用
v-model
將<select>
的結果值與$i18n.locale
做綁定 - 在
<select>
標籤上綁定@change
事件,藉此呼叫setLocale()
方法來切換網站語系
範例程式碼:
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。