專案中需要自定義切換中/英文,基於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掛載到...