在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：
step1: 在项目中安装vue-i18插件
rush:js;">
cnpm install vue-i18n --save-dev
step2:在项目的入口文件main.js中引入vue-i18n插件
rush:js;">
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: '
step3:页面中使用
在模板中使用时，大概有以下3种情况，若有疏漏，望大家指正
zh.js
en.js
rush:js;">
module.exports = {
menu : {
home:"home"
},content:{
main:"this is content"
}
}
rush:js;">
rush:js;">
3)作为js中文字使用时
rush:js;">
console.log(this.$t('content.main'));
4)待补充...
step4:页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：
rush:js;">
tabEn: function () {
this.$i18n.locale = 'en'
},tabCn: function () {
this.$i18n.locale = 'zh'
}
至此，vue-i18n插件使用完结。
总结
以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
