前端vue国际化(V18n)

栏目: JavaScript · 发布时间: 4年前

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

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

先分享一下vue的国际化,目前vue的国际化采用的是 vue-i18n

首先新建一个存放语言的文件目录,把提取后的中文、英文放在对应的文件中如下图:

前端vue国际化(V18n)

前端vue国际化(V18n)

前端vue国际化(V18n)

前端vue国际化(V18n)

前端vue国际化(V18n)

前端vue国际化(V18n)

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

在组件的html中语法:

前端vue国际化(V18n)

在js中语法:

前端vue国际化(V18n)

在js中调用 this.$i18n.locale = language(例:en_US,跟语言文件export出的对象名称保持一致)实现修改语言。

注意这里:

1、养成良好的变成喜欢,在写逻辑判断的时候,不要根据中文去判断,不然做国际化要改起来很麻烦。比如使用if (xxx === '中文')、xxx.indexof(‘中文’)等;

2、在使用V18n的时候我发现,在页面created之后mounted之前V18n才执行的,就意味着有些人在data()里面用中文初始化了一些属性,但是此时V18n还没有执行,于是一些属性被赋值成了$t('xxxxx'),即键值。

前端vue国际化(V18n)

前端vue国际化(V18n)

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

前端vue国际化(V18n)

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

前端vue国际化(V18n)

最后分享一个 kiwi 插件,kiwi是一款提取替换中文的插件,喜欢的也可以试试,十分好用,大家可以看一下链接中的文档。有时间我还会出一下jquery的国际化...


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解计算机系统

深入理解计算机系统

Randal E.Bryant、David O'Hallaron / 龚奕利、雷迎春 / 中国电力出版社 / 2004-5-1 / 85.00元

从程序员的视角,看计算机系统! 本书适用于那些想要写出更快、更可靠程序的程序员。通过掌握程序是如何映射到系统上,以及程序是如何执行的,读者能够更好的理解程序的行为为什么是这样的,以及效率低下是如何造成的。粗略来看,计算机系统包括处理器和存储器硬件、编译器、操作系统和网络互连环境。而通过程序员的视角,读者可以清晰地明白学习计算机系统的内部工作原理会对他们今后作为计算机科学研究者和工程师的工作有......一起来看看 《深入理解计算机系统》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试