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