一、安裝

npm install vue-i18n

如果在一個(gè)模塊系統(tǒng)中使用它，你必須通過(guò) Vue.use() 明確地安裝 vue-i18n：

二、使用

在 src 下創(chuàng)建 lang 文件夾。

1、準(zhǔn)備語(yǔ)言包

本例我準(zhǔn)備了兩種語(yǔ)言包，分別是中文和英文：zn、en。在 lang 下創(chuàng)建兩個(gè)文件，zn.js 和 en.js。

2、準(zhǔn)備翻譯的語(yǔ)言環(huán)境

在 lang 下創(chuàng)建 index.js，使用如上的兩種語(yǔ)言包。

3、實(shí)現(xiàn)語(yǔ)言翻譯

在 main.js 中將 i18n 注入 vue 中

使用方式

（1）直接使用

（2） 語(yǔ)言切換

（3）data 變量翻譯

假如頁(yè)面某個(gè)名稱綁定了 data 中變量，即可能存在多個(gè)值，此時(shí)又該如何進(jìn)行語(yǔ)言翻譯？

如下，“msg”存在多個(gè)取值，我們希望在切換“msg”值同時(shí)根據(jù)當(dāng)前語(yǔ)言環(huán)境進(jìn)行翻譯。

首先，明確“msg”的取值有兩個(gè)，分別為“message”、“display”，此時(shí)確保語(yǔ)言包中都存在這兩個(gè)詞與對(duì)應(yīng)的翻譯值。

其次，在組件中不能直接 $t('main.message') 使用，該種方式確定了翻譯對(duì)象，而“msg”的翻譯對(duì)象不確定，有可能是“message”、“display”甚至更多，于是，我使用了模板字符串，實(shí)現(xiàn)了值動(dòng)態(tài)變化自動(dòng)翻譯的效果。

Tips：在使用的過(guò)程中，出現(xiàn)了報(bào)錯(cuò)情況，將在第四點(diǎn)記錄。

三、整合 ElementUI 語(yǔ)言包

我們可以整合 ElementUI 中存在的語(yǔ)言包。

1、擴(kuò)展中文

2、擴(kuò)展英文

3、使用擴(kuò)展語(yǔ)言翻譯

根據(jù)上圖（語(yǔ)言包）取可翻譯字段。

四、問(wèn)題記錄

在使用過(guò)程中，中間有如下報(bào)錯(cuò)信息。

報(bào)錯(cuò)的原因主要是因?yàn)楫?dāng)前使用的版本不匹配，解決方案入下。

npm install vue-i18n@8

五、擴(kuò)展

vue3 中使用 vue-i18n

vue-i18n 在 vue3 中使用方式與 vue2 有些差異。

1、安裝

npm install vue-i18n@next -S

2、準(zhǔn)備語(yǔ)言環(huán)境

3、實(shí)現(xiàn)語(yǔ)言翻譯