前言:在vue项目中要使用到语言切换功能,找到一个vue-i18n插件觉得挺好用的
1. 安装
npm install vue-i18n
2. 引入
笔者在main.js中引入
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh', // 语言标识
messages: {
'zh': require('./assets/lang/zh'),
'en': require('./assets/lang/en')
}
})
new Vue({
el: '#app',
i18n,
...
})
两个js文件的内容demo分别为
3. 使用
在HTML中使用,格式为:{{$t('***')}}
<div >{{$t('menu.home')}}</div>
<div >{{$t('content')}}</div>
在js中使用,格式为:this.$t('menu.home')
切换语言,例如点击事件切换:
change(){
var lang = this.$i18n.locale;
if(lang === 'en'){
this.$i18n.locale = 'zh'
}else{
this.$i18n.locale = 'en'
}
}