前端vue国际化（V18n）

目前公司在搞国际化，虽然刚开始接触，但还是遇到了一些问题，如对你有帮助，烦请点个赞，谢谢。

先分享一下vue的国际化，目前vue的国际化采用的是 vue-i18n 。

首先新建一个存放语言的文件目录,把提取后的中文、英文放在对应的文件中如下图：

通过Vue.use调用内部install方法，最后别忘了在main.js中引入，绑定在vue实例上。

在组件的html中语法:

在js中语法:

在js中调用 this.$i18n.locale = language（例：en_US，跟语言文件export出的对象名称保持一致）实现修改语言。

注意这里：

1、养成良好的变成喜欢，在写逻辑判断的时候，不要根据中文去判断，不然做国际化要改起来很麻烦。比如使用if (xxx === '中文')、xxx.indexof(‘中文’)等；

2、在使用V18n的时候我发现，在页面created之后mounted之前V18n才执行的，就意味着有些人在data（）里面用中文初始化了一些属性，但是此时V18n还没有执行，于是一些属性被赋值成了$t('xxxxx')，即键值。

如图，我在data中初始化了部分属性，然后在created时候打印该属性，发现控制台报了2个警告，然后该属性被赋值成了键值。 解决方案就是：在data中初始化时不指定默认值，在mounted的时候进行赋值就ok了

之后就可以手动调用this.$i18n.locale = en_US方法实现中英文切换了），也可以根据cookie去赋值.

最后分享一个 kiwi 插件，kiwi是一款提取替换中文的插件，喜欢的也可以试试，十分好用，大家可以看一下链接中的文档。有时间我还会出一下jquery的国际化...