npm install vue-i18n
//main.js引入
//VueI18n
import VueI18n from 'vue-i18n'
import LangEn from '@/assets/js/en.js'
import LangCn from '@/assets/js/cn.js'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'cn', //当前语言中文;
messages: {
'en': LangEn,
'cn': LangCn,
}
})
//将i18n注入到vue实例中
window.vm = new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
//对应的en.json格式与cn.json格式一样,只需要把中文改为英文即可,如下:
export default {
//cn
message: {
login:"登录",
registered:"注册",
}
//en
//message: {
// login:"login",
// registered:"registered",
//}
}
//获取当前是那种语言
console.log(this.$i18n.locale)
//获取当前语言的某个字段名称
console.log(this.$t('message.login'))
//在模板中使用
<span>{{$t('message.login')}}</span>
//点击切换语言
onSelect(item) {
if(item.name === '中文'){
this.$i18n.locale = 'cn';
}else{
this.$i18n.locale = 'en'
}
},
vue多语言:vue-i18n
于 2019-12-20 17:19:26 首次发布