踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

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

先分享一下vue的国际化,目前vue的国际化采用的是vue-i18n
首先新建一个存放语言的文件目录,把提取后的中文、英文放在对应的文件中如下图:

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

通过Vue.use调用内部install方法,最后别忘了在main.js中引入,绑定在vue实例上。
在组件的html中语法:

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

在js中语法:

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.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'),即键值。

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

如图,我在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);
  }

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

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

踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)

分享一个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');

相关推荐