採用方式:使用國際化外掛程式vue-i18n,同時需要手動編寫語言(即:將專案中所有文字全部提出,增加其文字版本)。
npm install vue-i18n
在專案中建立目錄:i18n
其目錄存在於 src 目錄下,與module目錄並級。
langs:目錄存放語言檔案。index.js 配置引用語言的關鍵字。 cht.js 繁體語言包。 zh.js 中文語言包。
import zhlocale from 「element-ui/lib/locale/lang/zh-cn」;新增了支援element-ui語言切換的中文。
message主體中為各個模組中的文字,其巢狀形式、變數名稱必須與其他語言包中保持一致。
import twlocale from 『element-ui/lib/locale/lang/zh-tw』;新增了支援element-ui語言切換的繁體。
其中的巢狀方式跟zh.js保持一致。
舉例summarylist模組:
import i18n from 『@/i18n/i18n』;引用多語言(就是步驟2中新建的目錄)。
獲取了location.href**鏈結上的引數lang,其值在configconstant配置檔案中存在,才為當前專案中支援的語言。如支援該語言顯示對應的文字,不支援預設顯示為中文。
lang = zh-cn 中文
lang = zh-hk 繁體
舉例summarylist.vue檔案:
html使用方式為:
原:
採前會紀要列表
改:
輸入框中提示文字為:
原:
改:
函式中使用方式為:
原:
self.$message.warning("結束時間不能小於開始時間");
改:
self.$message.warning(self.$t('message.summarylist.dosuspensearch.searchhint'));
間不能小於開始時間");
改:
self.$message.warning(self.$t('message.summarylist.dosuspensearch.searchhint'));
vue實現國際化
這裡為了簡單,將所有的東西都寫到main.js,在實際的應用中需要將這些拆分到不同元件中。1.1 安裝vue的國際化支援npm install vue i18n當然如果你沒有沒事使用包管理工具,那麼你可以直接這樣使用 src script 1.2 配置使用 這裡我們使用包管理工具的方式配置,我們直接...
Vue實現國際化(中英切換)
實現這個需求要使用到vue i18n。npm install vue i18n然後掛載到main.js中,並配置。import vuei18n from vue i18n vue.use vuei18n 通過外掛程式的形式掛載 const i18n newvuei18n 注 locale是設定當前語...
Vue 語言國際化
1 安裝外掛程式 npm install vue i18n 中英文2 建立i18n例項src i18n index.jsimport vuei18n from vue i18n import vue from vue vue.use vuei18n const i18n new vuei18n ex...