Vue中使用vue-i18插件实现多语言切换功能
更新时间：2018年04月25日 10:23:57 作者：littlepath
在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，这篇文章分步骤给大家介绍了Vue中使用vue-i18插件实现多语言切换功能，感兴趣的朋友一起看看吧
在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：
step1: 在项目中安装vue-i18插件
cnpm install vue-i18n --save-dev
step2:在项目的入口文件main.js中引入vue-i18n插件
import Vue from 'vue'
import router from './router'
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')
}
})
// vue实例中引入
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n,
router,
template: '<Layout/>',
components: {
Layout
},
})
step3:页面中使用
在模板中使用时，大概有以下3种情况，若有疏漏，望大家指正
zh.js
module.exports = {
menu : {
home:"首页"
},
content:{
main:"这里是内容"
}
}
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中文字使用时
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插件实现多语言切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Vue 页面切换效果之 BubbleTransition(推荐)
使用 vue，vue-router，animejs 来讲解如何实现vue页面切换效果之 BubbleTransition，需要的朋友参考下吧2018-04-04
这篇文章主要介绍了vue中对监听esc事件和退出全屏问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2024-01-01
这篇文章主要介绍了使用vant-picker实现自定义内容，根据内容添加图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现2023-03-03
本文主要讲解了如何在vue中使用pdfjs预览pdf文件，这样的优势是无须让用户安装专门的软件即可实现预览，下面就看看如何实现这个需求2021-06-06
vue eslint报错error "Component name "*****"
这篇文章主要给大家介绍了关于vue eslint报错error “Component name “*****“ should always be multi-word”的解决方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
vue中对数组的元素进行删除,以前一直以为这个方法是vue中特有的,后来百度之后才知道原来是js的一个写法,下面这篇文章主要给大家介绍了关于Vue中splice()方法对数组进行增删改等操作的实现方法,需要的朋友可以参考下2023-05-05
最新评论