一、安裝
npm install vue-i18n如果在一個模塊系統中使用它,你必須通過 Vue.use() 明確地安裝 vue-i18n:

二、使用
在 src 下創建 lang 文件夾。
1、準備語言包
本例我準備了兩種語言包,分別是中文和英文:zn、en。在 lang 下創建兩個文件,zn.js 和 en.js。


2、準備翻譯的語言環境
在 lang 下創建 index.js,使用如上的兩種語言包。

3、實現語言翻譯
在 main.js 中將 i18n 注入 vue 中

使用方式
(1)直接使用

(2) 語言切換

(3)data 變量翻譯
假如頁面某個名稱綁定了 data 中變量,即可能存在多個值,此時又該如何進行語言翻譯?
如下,“msg”存在多個取值,我們希望在切換“msg”值同時根據當前語言環境進行翻譯。

首先,明確“msg”的取值有兩個,分別為“message”、“display”,此時確保語言包中都存在這兩個詞與對應的翻譯值。
其次,在組件中不能直接 $t('main.message') 使用,該種方式確定了翻譯對象,而“msg”的翻譯對象不確定,有可能是“message”、“display”甚至更多,于是,我使用了模板字符串,實現了值動態變化自動翻譯的效果。

Tips:在使用的過程中,出現了報錯情況,將在第四點記錄。
三、整合 ElementUI 語言包
我們可以整合 ElementUI 中存在的語言包。

1、擴展中文

2、擴展英文

3、使用擴展語言翻譯

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

四、問題記錄
在使用過程中,中間有如下報錯信息。

報錯的原因主要是因為當前使用的版本不匹配,解決方案入下。
npm install vue-i18n@8五、擴展
vue3 中使用 vue-i18n
vue-i18n 在 vue3 中使用方式與 vue2 有些差異。
1、安裝
npm install vue-i18n@next -S2、準備語言環境

3、實現語言翻譯




