一、安裝

npm install vue-i18n

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

二、使用

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

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

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

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

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

3、實現(xiàn)語言翻譯

在 main.js 中將 i18n 注入 vue 中

使用方式

（1）直接使用

（2） 語言切換

（3）data 變量翻譯

假如頁面某個名稱綁定了 data 中變量，即可能存在多個值，此時又該如何進行語言翻譯？

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

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

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

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

三、整合 ElementUI 語言包

我們可以整合 ElementUI 中存在的語言包。

1、擴展中文

2、擴展英文

3、使用擴展語言翻譯

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

四、問題記錄

在使用過程中，中間有如下報錯信息。

報錯的原因主要是因為當(dāng)前使用的版本不匹配，解決方案入下。

npm install vue-i18n@8

五、擴展

vue3 中使用 vue-i18n

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

1、安裝

npm install vue-i18n@next -S

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

3、實現(xiàn)語言翻譯