vue i18n多語言國際化

2021-10-01 05:33:10 字數 1440 閱讀 8426

專案中需要自定義切換中/英文,基於vue.js,結合vue-i18n,elementui,以下是使用方法。

vue.js+vue-i18n國際化

先不使用elementui,就簡單的vue.js+vue-i18n使用方法:

在main.js同級建i18n新資料夾,裡面新建i18n.js、langs資料夾,langs資料夾下新建en.js、cn.js;目錄如下:

//html: 

} // hello, world

//js切換語言

data()

},methods:

}通過改變this.$i18n.locale的值就可以自動切換頁面的語言了,en,ja,cn...等等

vue.js+vue-i18n+elementui國際化

更改的地方不多,如下

import vue from 'vue'

import locale from 'element-ui/lib/locale';

import vuei18n from 'vue-i18n'

import messages from './langs'

vue.use(vuei18n)

//從localstorage中拿到使用者的語言選擇,如果沒有,那預設中文。

const i18n = new vuei18n()

locale.i18n((key, value) => i18n.t(key, value)) //為了實現element外掛程式的多語言切換

export default i18n

import enlocale from 'element-ui/lib/locale/lang/en'

const en = ,

...enlocale

}export default en;

import zhlocale from 'element-ui/lib/locale/lang/zh-cn'

const cn = ,

...zhlocale

}export default cn;

問題總結:

1. 在html上的寫法為

} // hello, world

2. 在標籤屬性上的寫法 

3. 在js中的寫法為

const hello = this.$t('message.hello')

劃重點:第一二種用法是直接寫在dom上使用,切換語言時會自動切換過來;但是第三種用法就不會實時重新整理,這時就需要寫在computed計算屬性中,如下:

computed:,

},methods:,

/**此種寫法能夠解決在js裡使用多語言切換語言,沒實時切換過來的問題,

*而寫在標籤中的不需要這樣通過computed計算,因為dom掛載的資料具有雙向驅動

*/

語言國際化 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國際化語言切換

近期業務需求,需要對原有專案進行國際化處理,該專案是基於vue2 vantui2.x的移動端h5spa專案。上網查閱了相關資料,大多推薦使用vue i18n國際化外掛程式來實現不同語言的切換。經過測試,已基本實現中文和英文兩種語言的切換。現在主流的前端ui框架也支援語言國際化,若專案中使用ui框架比...

vue多語言外掛程式vue i18n

安裝vue i18nnpm install vue i18n s 使用 1.在main.js中引入vue i18nimport vuei18n from vue i18n vue.use vuei18n 2.vue i18n初始化const i18n newvuei18n 3.vue i18n掛載到...