踩坑vue国际化（V18n）+ jquery国际化（jquert.i18n.properties.js）

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

先分享一下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(‘中文’)、switch(xxx) { case ’中文‘: }等；
2、在组件created之后mounted之前V18n才会执行替换对应的语言，就意味着有些人在data（）里面用中文初始化了一些属性，但是此时V18n还没有执行，于是一些属性被赋值成了$t('xxxxx')，即键值。

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

  mounted() {
    setTimeout(() => {
      console.log('mounted():'执行);
      let ckText = {
        title: this.$t('pro_container.test'),
        hoverText: this.$t('pro_container.94'),
        AvgArr: []
      };
      this.ckText = ckText;
    }, 20);
  }

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

分享一个kiwi插件，kiwi是一款提取替换中文的插件，喜欢的也可以试试，十分好用，大家可以看一下链接中的文档。

最后简单说一下jq的国际化吧，引入jquery.i18n.properties.js文件,配置项如下：

    function loadI18nProperties(lang) {
        $.i18n.properties({
            name: 'strings', // 对应国际化文件名称
            path: '/static/js/i18n/', // 对应国际化文件目录
            mode : 'map', //用Map的方式使用资源文件中的值
            language: lang, // 调用国际化语言
            callback: function() { // 回调函数
            }
    });
    $(document).ready(function() {
        loadI18nProperties('zh_CN');
    });

name属性指的是国际化的文件名，jq的存放语言的文件是.properties为后缀的，以上面的例子，语言文件名为strings_en_US、strings_zh_CN。如果path写的不对的话，会报一个跨域的错误，提示让你去修改服务器配置文件去支持.properties文件，这里注意一下就好了。其他的在html中使用自定义属性方式赋值，js中就是简单的变量的方式。修改语言，就是将loadI18nProperties（lang）传递参数就去就可以了。

// html
<h1 data-i18n="UserName"></h1>
// js中
var Title = $.i18n.prop('js.UserName');