前端国际化之痛点(一):让人头疼的词条Key

2024-01-09 19:12

本文主要是介绍前端国际化之痛点(一):让人头疼的词条Key,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

VoerkaI18n是一款非常优秀的前端国际化解决方案,其开发的出发点是为了解决现存多语言的一些痛点,接下来几篇文章将分别进行分析。

  • 前端国际化之痛点(一):让人头疼的词条Key
  • 前端国际化之痛点(二):多包多库场景下联动多语言
  • 前端国际化之痛点(三):上线后修改翻译内容

现有方案痛点

前端国际化的方案非常多,绝大多数多语言方案均采用对要翻译的词条key的方式。

Vue-i18n为例,大体如下:

  • Vue-i18n
const messages = {en: {message: {hello: 'hello world'}},ja: {message: {hello: 'こんにちは、世界'}}
}
const i18n = new VueI18n({locale: 'ja', // 设置地区messages, // 设置地区信息
})

我们需要为每一个要翻译的词指定一个英文Key,这个英文Key一般需要具备一定的语义,如果要翻译的内容比较复杂,则这个英文key就不那么好翻译了。最终形成的多语言文件可能是这样的:

// en.json
{noAccess: {accessTitle: 'You are not authorized to operate~',accessMsg: 'Contact information: add QQ group discussion 665452019',},layout: {configTitle: 'Layout configuration',twoColumnsMenuBarColor: 'Default font color bar menu',twoIsColumnsMenuBarColorGradual: 'Column gradient',twoIsColumnsMenuHoverPreload: 'Column Menu Hover Preload',threeTitle: 'Interface settings',threeIsCollapse: 'Menu horizontal collapse',threeIsUniqueOpened: 'Menu accordion',threeIsFixedHeader: 'Fixed header.ts',threeIsClassicSplitMenu: 'Classic layout split menu',threeIsLockScreen: 'Open the lock screen',threeLockScreenTime: 'screen locking(s/s)',fourTitle: 'Interface display',fourIsShowLogo: 'Sidebar logo',fourIsBreadcrumb: 'Open breadcrumb',fourIsBreadcrumbIcon: 'Open breadcrumb icon',fourIsTagsview: 'Open tagsview',tipText: 'Click the button below to copy the layout configuration to `/src/stores/themeConfig.ts` It has been modified in.',},upgrade: {title: 'New version',msg: 'The new version is available, please update it now! Dont worry, the update is fast!',desc: 'Prompt: Update will restore the default configuration',}
}

然后在组件源码中可能是这样的:


<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
<p>{{ $t('layout.twoColumnsMenuBarColor' }}</p> 
<p>{{ $t('layout.threeIsLockScreen' }}</p> 
<p>{{ $t('layout.fourIsBreadcrumbIcon' }}</p> 
<p>{{ $t('layout.tipText' }}</p> 
<p>{{ $t('upgrade.msg' }}</p> 

这样问题就来了,在源代码中充斥了大量的如layout.tipText,layout.threeIsClassicSplitMenu这样的英文词条,这带来以下痛点问题

  • 无法在源码中从诸如layout.tipText,layout.threeIsClassicSplitMenu这样的英文Key中推断出原文的内容,需要反向查询才能知道。
  • 如何为要翻译的词条取一个适合语义的英文Key是比较难的,特别是比较长的词条。
  • 在开发过程中不符合直觉,不方便进行调整。
  • 调整修改流程比较麻烦

如何解决这些痛点呢?

业界已经存在的方案有:

  • 提供VSCODE插件,能解析语言文件(如en.json),然后在源码编辑时提供代码提示功能。如下例中,当输入layout.时列出备选的key让你选。
  • 有一个很有名的VSCODE插件i18n-ally,能自动解析语言文件,在源码中显示出原文。

解决痛点

针对这个痛点,VoerkaI18n则直接废弃了在源码中使用Key的方式,解决了些问题。

VoerkaI18n推荐在源代码中使用中文,不需要用到英文Key来标识词条。

其大概思路是这样的。

接下来在源码文件中,将所有需要翻译的内容使用t翻译函数进行包装,例如下:

  1. 在源代码中直接使用中文
import { t } from "./languages"
// 不含插值变量
t("中华人民共和国")
// 位置插值变量
t("中华人民共和国{}","万岁")
t("中华人民共和国成立于{}年,首都{}",1949,"北京")
  1. 提取需要的翻译的文本信息

接下来我们使用voerkai18n extract命令来自动扫描工程源码文件中的需要的翻译的文本信息。 voerkai18n extract命令会使用正则表达式来提取t("需要的翻译的文本")包装的文本。

  1. 编译语句包
voerkai18n compile

使用voerkai18n compile命令将翻译后的语言包编译成代码。编译过程中进行了去重、关联等处理。

小结

使用VoerkaI18n进行国际化完全摒弃了传统的使用英文Key来标识待翻译词条的方案,另外符合直觉,也更加容易进行修改调整。完整的例子可以参考:

VoerkaI18n入门示例

VoerkaI18n文本映射过程说明

后续

  • 前端国际化之痛点(一):让人头疼的词条Key
  • 前端国际化之痛点(二):多包多库场景下联动多语言
  • 前端国际化之痛点(三):上线后修改翻译内容

这篇关于前端国际化之痛点(一):让人头疼的词条Key的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/588138

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何解决线上平台抽佣高 线下门店客流少的痛点!

目前,许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流,但其费用昂贵。鉴于此,众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台,但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下,商家之间的合作网络逐渐成为一种有效的解决方案,通过资源和客户基础的共享,实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例,该平台融合了环保消费积分系统,在短

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密