Vue中使用vue

Vue中使用vue

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

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

cnpm install vue-i18n --save-dev nXNhYJEX

step2:在项目的入口文件main.js中引入vuhttp://e-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: '',

components: {

Layout

},

})

step3:页面中使用

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

zh.js

module.exports = {

menu : {

home:"首页"

},

content:{

nXNhYJEX main:"这里是内容"

}

}

en.js

module.exports = {

menu : {

home:"home"

},

content:{

main:"this is content"

}

}

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

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插件实现多语言切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。