vue專案實現國際化方案

2021-10-11 04:54:30 字數 1872 閱讀 9917

採用方式:使用國際化外掛程式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...