微客导航 » 文章资讯 » Vue中使用vue-i18插件实现多语言切换功能

Vue中使用vue-i18插件实现多语言切换功能

2023-09-13 18:03:06 162

在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：

step1:在项目中安装vue-i18插件

cnpminstallvue-i18n--save-dev

step2:在项目的入口文件main.js中引入vue-i18n插件

importVuefrom'vue'
importrouterfrom'./router'
importVueI18nfrom'vue-i18n'
Vue.use(VueI18n)
consti18n=newVueI18n({
locale:'zh',//语言标识
messages:{
'zh':require('./assets/lang/zh'),
'en':require('./assets/lang/en')
}
})
//vue实例中引入
/*eslint-disableno-new*/
newVue({
el:'#app',
i18n,
router,
template:'',
components:{
Layout
},
})

step3:页面中使用

在模板中使用时，大概有以下3种情况，若有疏漏，望大家指正

zh.js

module.exports={
menu:{
home:"首页"
},
content:{
main:"这里是内容"
}
}

en.js

module.exports={
menu:{
home:"home"
},
content:{
main:"thisiscontent"
}
}

1）在标签内作为正文内容

{{$t('menu.home')}}

2)作为标签属性使用

3)作为js中文字使用时

console.log(this.$t('content.main'));

4)待补充...

step4:页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：

tabEn:function(){
this.$i18n.locale='en'
},
tabCn:function(){
this.$i18n.locale='zh'
}

至此，vue-i18n插件使用完结。

总结

以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

Vue中使用vue-i18插件实现多语言切换功能

热门推荐

随机推荐