Vue I18n國際化語言切換

2022-06-30 20:18:11 字數 858 閱讀 2486

近期業務需求,需要對原有專案進行國際化處理,該專案是基於vue2+vantui2.x的移動端h5spa專案。上網查閱了相關資料,大多推薦使用vue-i18n國際化外掛程式來實現不同語言的切換。經過測試,已基本實現中文和英文兩種語言的切換。現在主流的前端ui框架也支援語言國際化,若專案中使用ui框架比較多,建議參考ui官方文件來配置國際化。vue i18n通過簡單的api來實現專案的國際化;該外掛程式除了簡單的翻譯之外還支援數字、日期時間等本地化處理。

npm install vue-i18n

// or

yarn add vue-i18n

import vue from 'vue';

import vuei18n from 'vue-i18n';

vue.use(vuei18n);

// 配置語言環境資訊

const messages =

},zh:

}};// 建立 vuei18n 例項

const i18n = new vuei18n();

// 建立掛載 vue 例項

new vue({

router,

i18n,

// 更改為其它的 locale

i18n.locale = 'zh';

中文 / en

:切換語言時,所有引用多語言的頁面都會自動更新為對應的語言。初始化i18n例項時要設定預設展示的語言。

語言國際化 vue i18n

安裝依賴包 npm i vue i18n s 在根目錄建立乙個 lang的資料夾,並且在lang資料夾內建立cn.js 和 en.js 開啟 main.js,注入vue例項中 import vue from vue import vuei18n from vue i18n 語言國際化 vue.use...

vue i18n多語言國際化

專案中需要自定義切換中 英文,基於vue.js,結合vue i18n,elementui,以下是使用方法。vue.js vue i18n國際化 先不使用elementui,就簡單的vue.js vue i18n使用方法 在main.js同級建i18n新資料夾,裡面新建i18n.js langs資料夾...

vue i18n和ElementUI國際化使用總結

vue i18n 安裝 npm install vue i18n 在main.js同級建i18n資料夾,並裡面建i18n.js langs資料夾,langs資料夾下建en.js cn.js 目錄如下 assets logo.png components helloworld.vue i18n i18...