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

发布时间:2019-05-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

clipboard.png

clipboard.png

clipboard.png

clipboard.png

踩坑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');

脚本宝典总结

以上是脚本宝典为你收集整理的踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)全部内容,希望文章能够帮你解决踩坑vue国际化(V18n)+ jquery国际化(jquert.i18n.properties.js)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue