vue專案中如何使用多語言(vue-i18n)
阿新 • • 發佈:2018-11-27
因專案需要,需要使用多語言,特此記錄使用方法。
第一步:安裝vue-i18n
npm install vue-i18n
第二步:在生成的i18n資料夾中的index.js裡引入vue-i18n
第三步:依舊在i18n資料夾中的indx.js檔案裡實例化,並且設定預設語言
第四步:掛在到vue的例項中
在這裡需要注意在掛載之前需要引入一下
第五步:準備一些多語言資源。
我的做法是在生成的i18n資料夾裡新建一個lang資料夾專門來存放多語言json檔案。如下圖:
之後我們就可以方便的實時更改語言文案啦。如下圖:
第六步:動態切換語言
因為我本次專案使用的UI框架是iview。頁面程式碼如下:
vue-i18n 提供了一個全域性配置引數叫 “locale”,通過改變 locale 的值可以實現不同語言的切換。
在頁面中只需要在切換時,修改this.$i18n.locale
的值即可。
第七步:如何在HTML中使用
{{$t('header.home')}}
第八步:如何在js中使用
{{this.$t('header.home')}}
至此已基本完成vue中的多語言操作。