Vue如何基于vue-i18n实现多国语言兼容

这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

vue中使用 vue-i18n 兼容多国语言

1.安装：npm install vue-i18n --save-dev

2.在main.js文件中引入：

 import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({ locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh': require('./VueI18n/language-zh'), // 'en': require('./VueI18n/language-en') } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, i18n, components: { App }, template: '' })

3.在src下新建文件夹VueI18n（文件名字可自己定）然后在文件夹下建立两个文件language-zh.js和language-en.js

你也可以创建的是两个json文件如language-zh.json但是里面的格式也改成json格式

json 格式：

 { 　　"lang":{ 　　　　"home": "HHHHHHHHome", 　　　　"name": 'Chinese' 　　} }

在main.js中引入这两个文件

 Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({ locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh': require('./VueI18n/language-zh'), //引入language-zh.js language-en,js 'en': require('./VueI18n/language-en') } })