微客导航 » 文章资讯 » vue使用vue-i18n实现国际化的实现代码

vue使用vue-i18n实现国际化的实现代码

2023-09-14 10:22:05 170

需求

公司项目需要国际化，点击按钮切换中文/英文

1、安装

npminstallvue-i18n--save

2、注入vue实例中，项目中实现调用api和模板语法

importVueI18nfrom'vue-i18n'

Vue.use(VueI18n);

consti18n=newVueI18n({
locale:'zh-CN',//语言标识,通过切换locale的值来实现语言切换,this.$i18n.locale
messages:{
'zh-CN':require('./common/lang/zh'),//中文语言包
'en-US':require('./common/lang/en')//英文语言包
}
})

newVue({
el:'#app',
i18n,//最后
router,
template:'',
components:{App}
})

3、对应语言包

zh.js中文语言包：

exportconstlang={
homeOverview:'首页概览',
firmOverview:'公司概述',
firmReports:'财务报表',
firmAppendix:'更多附录',
firmIndex:'主要财务指标',
firmAnalysis:'对比分析',
firmNews:'新闻事件档案',
firmOther:'其他功能',
}

en.js英文语言包：

exportconstlang={
homeOverview:'Homeoverview',
firmOverview:'firmOverview',
firmReports:'firmReports',
firmAppendix:'firmAppendix',
firmIndex:'firmIndex',
firmAnalysis:'firmAnalysis',
firmNews:'firmNews',
firmOther:'firmOther'
}

4、按钮控制切换语言

this.$i18n.locale,当你赋值为‘zh-CN'时，导航栏就变成中文；当赋值为‘en-US'时，就变成英文：

中文

changeLangEvent(){
console.log('changeLangEvent');
this.$confirm('确定切换语言吗?','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
if(this.$i18n.locale==='zh-CN'){
this.$i18n.locale='en-US';//关键语句
console.log('en-US')
}else{
this.$i18n.locale='zh-CN';//关键语句
console.log('zh-CN')
}
}).catch(()=>{
console.log('catch');
this.$message({
type:'info',
});
});
}

5、模板渲染

静态渲染：


{{$t('lang.homeOverview')}}

如果是element-ui的，在要翻译的前面加上冒号

比如：label="用户姓名"就改成:label="$t('order.userName')"

动态渲染：

{{navCompany}}
computed:{
navCompany:function(){
if(this.nav_company){
letstr='lang'+this.nav_company;
returnthis.$t(str);
}
}
},




{{getTitle(title1)}}




methods:{
getTitle(title){
letstr='lang.'+title;
returnthis.$t(str);
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue使用vue-i18n实现国际化的实现代码

热门推荐

随机推荐