VueI18n插件的简单应用于国际化

　　作为一个前端小白，刚刚接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能，在看element-ui的开发文档时，只有简单的引入没有应用实例，对于我这种小白不能get到，无从下手。在网上也查了很多次，发现资料极其少，可能是两者恰好是近年新兴起来的，成熟的参考资料不是那么多。于是自己在参考相关文档后，多次尝试后，终于成功了。写下这部分的总结便于自己以后参考，也希望有可能帮到有需要的人。

一、Vuei18n的安装（这个是基于已经安装了Vue的前提下哦） 
　　命令行：npm install vue-i18n –save 
二、使用（参考于网上现有的资料） 
　　也是先在main.js入口文件中进行引入配置。分如下两种情况： 
　　1. 直接在main.js中写入语言的对应，根据自己实际情况来选择所需要的语言，这里以中文和英语为例尝试：

 （1）main.js

import VueI18n from 'vue-i18n' 　　 Vue.use(VueI18n); 　　 const i18n = new VueI18n({ 　　 locale: 'Chinese', // 语言标识
　　 messages:{ 　　 Chinese : { 　　 message: { 　　 hello: '你好世界!', 　　 do:'搜一下', 　　 center:'处理中心', 　　 work:'我的工作台', 　　 choose1:'选择1', 　　 choose2:'选择2', 　　 choose3:'选择3', 　　 dan:'订单管理' 　　 } 　　 }, 　　 English : { 　　 message: { 　　 hello: 'hello world', 　　 do:'search', 　　 center:'processing center', 　　 work:'my Workbench', 　　 choose1:'option1', 　　 choose2:'option2', 　　 choose3:'option3', 　　 dan:'Order management' 　　 } 　　 } 　　 } 　　}) 　　/*还需要将VueI18n挂载到Vue实例上，可全局使用*/
　　new Vue({ 　　 el: '#app', 　　 i18n, 　　 render: h => h(App) 　　})

 

　　（2）.vue文件 

　　语言下拉选择框的下面是一个简单的导航栏和form表单的一个输入框，使用element-ui插件中的，用来简单试验是否可以配套element-ui使用。因此简单的设置，下拉列表默认值为中文，表单数据也在数据中定义一下。
　　！！然后elment-ui相关要显示的，写法有些不一样： v-bind 属性名 = "$t('message.xx')" 　　或 :属性名 = "$t('message.xx')" 

　　最后还需要将调用watch函数，对我们的语言变量进行监听，实时监测所选的语言，按key进行匹配。

　　2 .也可以将翻译文件单独写在assets，在main.js文件中引用即可。如下图所示：我在assets目录下新建了一个translate文件夹，分别存放了中文和英文翻译，便于后面的修改和添加。

　　Chinese.js代码如下：　

export const Ch = 　　{ 　　 message: { 　　 hello: '你好世界!', 　　 do:'搜一下', 　　 center:'处理中心', 　　 work:'我的工作台', 　　 choose1:'选择1', 　　 choose2:'选择2', 　　 choose3:'选择3', 　　 dan:'订单管理', 　　 activityname:'活动名称' 　　 } 　　

　　同理English.js也一样，下面在main.js中就修改为：

const i18n = new VueI18n({ 　　locale: 'Chinese', // 语言标识
 　　 messages:{ 　　 Chinese : Ch, 　　 English : En 　　 } 　　})

　最后说下自己犯的两个错误： 
　　1.一定要用es6语法将需要引用的文件export出去，刚开始我就没有这样，直接在main.js里引用没有作用T T； 
　　2.在main.js里import时，一定要加{ }，没有加的后果也是…… 
　　！！！！！！！可能自己在这方面比较欠缺，在后来第二次项目中使用时，又忘记了加{}，找了好久的原因，事不过三，需要自己谨记。

　　三.最终实现效果如下：

 选择要设置的语言，默认为中文显示，如下图所示： 

 当切换为英文时，效果如下： 

　　有什么不对的地方，希望大家能帮忙指正，一起进步。还有关于element-ui中的国际化的使用，自己也一直没有弄明白，如果大佬们知道能分享给我^_^

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
　　又过了一周的时间，自己在项目中重新使用时，又遇到了很多新的问题。例如： 
　　（1）虽然在main.js里使用了全局挂载，在各个子组件中使用时，我又分别调用了watch函数去监听locale变量的值变化，，，这样其实是没有必要的。因为我的导航菜单项的路由跳转控制在Home.vue中，在Home.vue中进行监听时即使子路由跳转也会知道locale的值，从而改变语言状态显示。 
　　（2）国际化的模板语言是$t()，而不是{{}}，因此在路由跳转时，原本就是通过遍历显示菜单项，然后每个菜单项匹配router.js中的name,原本的未国际化之前，代码实现如下： 

　　修改为： 

　　只要把route.js中定义路由项的地方，路由的name改为key就可以了，在i18n中$t指令是先通过找到item.name中对应的key，再通过key去匹配翻译文件中的语言状态。 
暂且遇到的坑都记在这里了……^_^ 接下来的日子，希望自己能继续保持学习和记录的热情，一步一步地成长，♪(^∇^*)

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 、、、、、、、 后来的后来，在vue中的js部分，包括data里的数据及methods里的方法都不可避免的使用到了国际化标签。需要在调用处通过this关键词调用国际化指令t，即this.t（’key’），确实一般实现上都没有问题。 
但后来发现，在elment-ui表单处必然涉及到表单验证，如果是直接在data里写简单的不为空的提示信息验证，如下所示： 

　　验证信息不能被识别，提示信息仍是原样输出，时间紧迫我只能通过在函数语句中调用实现： 
 
　　通过callback语句调用，使用this.$t(‘key’)又能匹配识别。目前还没有找到原因，希望有知道的小伙伴务必分享给我，非常感谢咯。

 

声明：本博文由博主Bonjourjw（http://blog.csdn.net/bonjourjw）原创编辑，我经其同意后转载过来供大家交流学习，未经其同意禁止转载！