1、 下載element-ui和vue-i18n:
npm i element-ui --save npm i vue-i18n –save
2、 創建一個 i18n 文件夾,
在main.js 中導入i18n,掛在到vue實例中區;
注意: 在en.js或者zh-cn.js中,可以將message中的幾個屬性合成一個,如上面的linkWords。
3、使用語言
直接在使用的地方 $t(‘message.key’) ;
<p>{{$t('message.hello')}}</p>
或者使用 v-t=”{ path: ‘message.hello’ }” 效果和上面相同
<p v-t="{ path: 'message.poem'}"></p>
,並且可以傳值
4、切換語言環境
給按鈕注冊事件,事件中切換this.$i18n.locale = ‘ ’ 的值為相應的語言值即可。
switchChinese(){
this.$i18n.locale = 'zh';
window.localStorage.setItem('qinLang','zh')
},
switchEnlish(){
this.$i18n.locale = 'en';
window.localStorage.setItem('qinLang','en')
}