目前公司在搞国际化,虽然刚开始接触,但还是遇到了一些问题,如对你有帮助,烦请点个赞,谢谢。
先分享一下 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 中初始化了 title 属性,然后在 created 时候打印该属性,发现控制台报了 2 个警告,然后该属性被赋值成了键值。解决方案就是:在 data 中初始化时不指定默认值,在 mounted 的时候进行赋值就 ok 了
之后就可以手动调用 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’);