在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：
step1: 在项目中安装vue-i18插件
cnpm install vue-i18n --save-devstep2:在项目的入口文件main.js中引入vue-i18n插件
step3:页面中使用
在模板中使用时，大概有以下3种情况，若有疏漏，望大家指正
zh.js
en.js
module.exports = { menu : { home:"home" }, content:{ main:"this is content" } }1）在标签内作为正文内容
<div class="title">{{$t('menu.home')}}</div>2)作为标签属性使用
<input :placeholder="$t('content.main')" type="text">3)作为js中文字使用时
4)待补充...
step4:页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：
tabEn: function () { this.$i18n.locale = 'en' }, tabCn: function () { this.$i18n.locale = 'zh' }至此，vue-i18n插件使用完结。
总结
以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
最新文章
热门文章
猜你喜欢
