> 說明

透過給HTML頁面元素包裹Vue例項，利用Vue自帶的多語言機制，可以方便的實現前端頁面的國際化。

> 實現

1、定義一個VueI18n物件，定義兩套語言，zh-CN表示中文，en-US表示英語，預設初始本地化語言為中文。並可自定義兩個翻譯方法，一個做全匹配翻譯，一個做最大模糊匹配翻譯。不定義這兩個方法其實也是可行的，有這兩個方法可以使翻譯手段更加靈活。
* i18n.js

```javascript
var messages = {
	'zh-CN': zh,
	'en-US': en,
}

const i18n = new VueI18n({
	locale: 'zh-CN',
	messages,
})

2、定義兩套JS語言包，分別對應中英文詞條。物件名需要和上面messages裡定義的名稱一致。
* zh.js

```javascript
const zh = {
	"國際化功能測試": "國際化功能測試",
	"語言：": "語言：",
	"賬號：": "賬號：",
	"密碼：": "密碼：",
	"登入":"登入",
	"請輸入賬號": "請輸入賬號",
	"請輸入密碼": "請輸入密碼",
	"登入成功": "登入成功",
	"登入失敗": "登入失敗",
	"重置": "重置",
}
```

* en.js

```javascript
const en = {
	"國際化功能測試": "International function test",
	"語言：": "Language: ",
	"賬號：": "Account: ",
	"密碼：": "Password: ",
	"登入":"Login",
	"請輸入賬號": "Please Input Account",
	"請輸入密碼": "Please Input Password",
	"登入成功": "Success",
	"登入失敗": "Faild",
	"重置": "Reset",
}
```

3、下載vue-i18n語言外掛，需要在自己的頁面中引用。可以在CDN上直接下載：

https://unpkg.com/vue-i18n/dist/vue-i18n

如果頁面包含element-ui元件，則還需要下載element-ui的本地化語言包。

4、在頁面檔案中引用需要的JS，幷包裹Vue例項，以下例子是一個完整的例子。

例項載入時，讀取本地瀏覽器快取中的語言設定，如果沒有定義，預設本地化為中文。selectLanguage方法用於切換語言。當使用者在頁面上選擇需要的語言時，將zh-CN或en-US引數傳遞給該方法，將語言設定資訊記錄到本地瀏覽器快取中。

```javascript

使用Vue i18n對前端頁面進行國際化處理

相關文章