a.中文转英文后肯定会遇到文案过长的情况。那么可能需要精简翻译,使文案保持在一定的可接受的长度范围内。但是大部分的情况都是文案在保持原意的情况下无法再进行精简。这时必须要前端来进行样式上的调整,那么可能还需要设计的同学参与进来,对一些文案过多出现折行的情况再单独做样式的定义。在细调样式这块,主要还是通过不同的语言标识去控制不同标签的class,来单独定义样式。
b. 此外,还有部分图片也是需要做调整,在C端中,大部分由产品方去输出内容,那么图片这块的话,还需要设计同学单独出图。c. 在第三方插件中这个环节当中,因为使用了腾讯地图插件,由于腾讯地图并未推出国内地图的英文版,所以整个页面的地图部分暂时无法做到国际化。由此联想到,你应用当中使用的其他一些第三方插件或者SDK。
最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。
部分网站的当前解决的方案
url
进行区分,需要维护多份代码。面对的问题
语言vs标识谁来做?
IP
去下发语言标识字段(前端根据下发的表示字段切换语言环境)useragent.lang
浏览器环境语言进行设定 当前项目中入口页面由服务端来渲染,其他的页面由前端来接管路由。在入口页面由服务器下发lang
字段去做语言标识,在页面渲染出来前,前端来决定使用的语言包。语言包是在本地编译的过程中就将语言包编译进了代码当中,没有采用异步加载的方式。前端静态资源翻译
vue-i18n
这个插件来进行。插件提供了单复数,中文转英文的方法。a下文有对vue-i18n
的源码进行分析。因为英文的阅读方向也是从左到右,因此语言展示的方向不予考虑。但是在一些阿拉伯地区国家的语言是从右到左进行阅读的。服务端数据翻译
前端样式的调整
地图
,SDK
等)a.中文转英文后肯定会遇到文案过长的情况。那么可能需要精简翻译,使文案保持在一定的可接受的长度范围内。但是大部分的情况都是文案在保持原意的情况下无法再进行精简。这时必须要前端来进行样式上的调整,那么可能还需要设计的同学参与进来,对一些文案过多出现折行的情况再单独做样式的定义。在细调样式这块,主要还是通过不同的语言标识去控制不同标签的
class
,来单独定义样式。 b. 此外,还有部分图片也是需要做调整,在C端中,大部分由产品方去输出内容,那么图片这块的话,还需要设计同学单独出图。c. 在第三方插件中这个环节当中,因为使用了腾讯地图
插件,由于腾讯地图并未推出国内地图的英文版,所以整个页面的地图部分暂时无法做到国际化。由此联想到,你应用当中使用的其他一些第三方插件
或者SDK
。跨地区xxxx
在一些支付场景下,货币符号,单位及价格的转化等。不同国家地区在时间的格式显示上有差异。
项目的长期维护
map
表的维护当前翻译的工作流程是拆页面,每拆一个页面,FE同学整理好可能会出现的中文文案,再交由翻译的同学去完成翻译的工作。负责不同页面的同学维护着不同的
map
表,在当前的整体页面架构中,不同功能模块和页面被拆分出去交由不同的同学去做,那么通过跳页面的方式去暂时缓解map
表的维护问题。如果哪一天页面需要收敛,这也是一个需要去考虑的问题。如果从整个项目的一开始就考虑到国际化的问题并采取相关的措施都能减轻后期的工作量及维护成本。同时以后一旦map
表内容过多,是否需要考虑需要将map
表进行异步加载。Vue-i18n的基本使用
Vue-i18n
是以插件的形式配合Vue
进行工作的。通过全局的mixin
的方式将插件提供的方法挂载到Vue
的实例上。具体的源码分析
其中
install.js
Vue的挂载函数,主要是为了将mixin.js
里面的提供的方法挂载到Vue
实例当中:接下来就看下在
Vue
上混合了哪些methods
或者钩子函数
. 在mixin.js
文件中:这里注意下这几个方法的区别:
$tc
这个方法可以用以返回翻译的复数字符串, 及一个key
可以对应的翻译文本,通过|
进行连接:例如:
$te
这个方法用以判断需要翻译的key
在你提供的语言包(messages)
中是否存在.接下来就看看
VueI18n
构造函数及原型上提供了哪些可以被实例继承的属性或者方法另外还有一个比较重要的库函数
format.js
:总结
本项目是使用
vue
作为前端框架,使用vue-i18n
作为国际化的工具。vue-i18n
进行替换body
上添加多语言的标识class
属性SDK
或插件
的国际化推动