迷离的夜空，灰黑色的天际悬着一轮金色的孤舟，载着满仓的梦想，驶向云层深处；凉风微微的吹袭着黑夜的素纱，掸掉岁月的风尘；融融的月光静静的流淌，冲断记忆的决堤；零星点点，柔柔的洒在树叶上，泛出浅浅的绿；如华的银色裹住一丝清凉，铺设一地的奢华。
在基于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中如何使用vue-i18插件如何实现多语言切换功能就介绍到这了。青春的美丽与珍贵，就在于它的无邪与无瑕，在于它的可遇而不可求，在于它的永不重回。更多相关Vue中如何使用vue-i18插件如何实现多语言切换功能内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
