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中的多語言操作。