vue lang_vue 国际化的简单实现

Vue 国际化设置

由于工作的原因，这几天做一个了vue 国际化的这么的一个需求，其实业务逻辑很简单，就是可以随意切换中英文，提供多语言的切换。vue 提供了一个国际化的插件，vue-i18n ，所以我们可以直接来使用，先安装下来， 在命令行中执行 npm install vue-i18n （推荐npm 包依赖），一般情况下如果整个项目开发的话，很少会用到src 导入的方式（不推荐这样导入），所以不多做介绍。

接下来我详细介绍一下，我是如何一步一步做的， 首先，在main.js 引入 vue-i18n

// main.js

Import VueI18n from ‘vue-i18n’

vue.use(VueI18n). // 这里通过插件的形式挂载 ，像Vuei18n 这些vue官方 提供的插件 ，内部都有 install 的方法 ，所以可以直接vue.use() 的方式挂载，而像 axios 这些 非vue 官方的提供的插件，没有install的方法，所以，挂载用 Vue.prototype 的方法添加。其实用法都是一样的，只是挂载的时候稍微有点区别，但是axios 非官方提供，但胜于官方，所以vue官方也没有必要在，提供这么一个类似于axios 的插件了。

const i18n = new VueI18n ({

locale : ‘zh-CN’, // 语言表识

// 可以通过 this.$i18n.locale 的值 来切换语言

messages： {

‘zh-CN’: require（’./lang/zh-CN）,

‘en-US’: require(‘./lang/en-US’)

}

})

最后，不要忘了挂载载vue上， 跟router ，store 等之类的插件一样，

new Vue({

el:’#app’,

i18n,

// …

})

这样我们就算是配置完了，刚刚也看到了，我们require了两个文件 ， zh-CN 和 en-US ，所以我们现在要准备好两套中英文的语言的文件，

// zh-CN / index.js

Export default {

Zn:{

Login: 登录

}

}

// en-US / index.js

Export default {

En :{

login: login

}

}

然后我们只需通过触发事件的形式，来控制locale 的值，就可以实现国际化了。

this.$i18n.locale = zn-CN // OR this.$i18n.locale = en-US