Vue中使用vue-i18插件实现多语言切换功能
程序员文章站
2022-05-20 09:46:07
在基于vue-cli项目开发过程中,多语言切换功能可使用,具体实现方法如下:
step1: 在项目中安装vue-i18插件
cnpm install vue-i...
在基于vue-cli项目开发过程中,多语言切换功能可使用,具体实现方法如下:
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插件实现多语言切换功能,希望对大家有所帮助
上一篇: 你点的 ES6一些小技巧,请查收
下一篇: 不准性交(姓焦)
推荐阅读
-
Vue中使用vue-i18插件实现多语言切换功能
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
使用vue-i18n插件实现vue语言的切换,国际化。
-
vue中通过使用$attrs实现组件之间的数据传递功能
-
在vue项目中使用codemirror插件实现代码编辑器功能
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
-
vue使用vant中的checkbox实现全选功能
-
Vue中使用Lodop插件实现打印功能的简单方法
-
使用vue 国际化i18n 实现多实现语言切换功能
-
在Vue中使用vue-i18插件实现多语言切换