前端国际化【免费下载链接】vue-i18n:globe_with_meridians: Internationalization plugin for Vue.js项目地址https://gitcode.com/gh_mirrors/vu/vue-i18n点击查看免费下载本指南以 vue-i18n 官方文档《Sintaxe mensagens locais》本地化消息语法为骨架系统讲解 locale messages 的完整数据结构字符串、嵌套对象、数组、:关联消息linked messages及其大小写修饰符以及高级的**消息函数message function**用法。读完本文你将掌握如何组织多语言消息、用 key path 精准取词、复用既有翻译片段并在复杂语言场景下用 JavaScript 函数动态生成译文——同时结合 src/index.js、src/path.js 与 test/unit 的测试用例理解这些语法在源码层面的实现原理。本地化消息的整体结构Structure语法类型定义vue-i18n 的本地化消息Locale Messages在类型层面可以抽象为如下 BNF 风格的注解以 Flowtype 定义呈现见 types/index.d.ts 中对应的 TypeScript 声明type LocaleMessages { [key: Locale]: LocaleMessageObject } type LocaleMessageObject { [key: Path]: LocaleMessage } type LocaleMessageArray LocaleMessage[] type MessageContext { list: (index: number) mixed, named: (key: string) mixed, linked: (key: string) TranslateResult, values: any, path: string, formatter: Formatter, messages: LocaleMessages, locale: Locale }; type MessageFunction (ctx: MessageContext) string; type LocaleMessage string | MessageFunction | LocaleMessageObject | LocaleMessageArray; type Locale string type Path string从类型定义可以看出LocaleMessages是最外层结构以 locale如pt、en为键LocaleMessageObject是单个 locale 下的消息对象以路径Path为键LocaleMessage是一个递归联合类型一条消息可以是普通字符串、消息函数MessageFunction、嵌套对象或数组——这意味着你可以构造任意深度的嵌套结构MessageContext是消息函数运行时拿到的上下文对象包含list、named、linked等工具函数后文详述。一个典型的多语言消息结构基于上述语法你可以配置如下结构的本地化消息{ // 本地化 pt pt: { key1: esta é a mensagem 1, // 常见用法 nested: { // 嵌套 message1: esta é a mensagem aninhada 1 }, errors: [ // 数组 esta é a mensagem de código de erro 0, { // 数组中的对象 internal1: esta é uma mensagem de código de erro interno 1 }, [ // 数组中的数组 este é o erro de array aninhado 1 ] ] }, // 本地化 en en: { // ... } }该结构同时涵盖了四种典型形态普通键值对key1、嵌套对象nested.message1、数组errors、数组内嵌对象与数组。这一结构与测试夹具 test/unit/fixture/index.js 中errors字段的定义完全一致是官方测试反复验证过的形态。通过 key path 访问消息在上述结构中你可以用以下 key path 进行翻译div idapp !-- 常见用法 -- p{{ $t(key1) }}/p !-- 嵌套 -- p{{ $t(nested.message1) }}/p !-- 数组 -- p{{ $t(errors[0]) }}/p !-- 数组中的对象 -- p{{ $t(errors[1].internal1) }}/p !-- 数组中的数组 -- p{{ $t(errors[2][0]) }}/p /div渲染结果如下div idapp !-- 常见用法 -- pesta é a mensagem 1/p !-- 嵌套 -- pesta é a mensagem aninhada 1/p !-- 数组 -- pesta é a mensagem de código de erro 0/p !-- 数组中的对象 -- pesta é uma mensagem de código de erro interno 1/p !-- 数组中的数组 -- peste é o erro de array aninhado 1/p /div源码视角key path 是如何被解析的key path 的解析并非简单字符串拼接而是由 src/path.js 中的I18nPath类完成。该类参考了 Vue.js 的 path parser实现了一个状态机来解析 key path它定义了BEFORE_PATH、IN_PATH、IN_IDENT、IN_SUB_PATH、IN_SINGLE_QUOTE、IN_DOUBLE_QUOTE、AFTER_PATH等状态src/path.js#L17-L26支持点号.分隔的标识符如nested.message1方括号[0]数组下标且支持嵌套下标[2][0]单引号/双引号包裹的子路径连字符-、下划线_、美元符$等字符作为合法标识符。parsePath还会把解析结果缓存起来src/path.js#L266-L275避免对同一 key path 反复解析带来的性能损耗。测试夹具 test/unit/fixture/index.js 中甚至包含hyphen-hello、colon:hello、pipe|hello、日本語、hello world等特殊键名用于验证 path parser 对各种字符的兼容性。关联本地化消息Linked Locale Messages如果某条翻译键的内容与另一条永远一致你可以直接链接到它避免重复维护同一份文案。链接语法非常简单在内容前加:前缀后面紧跟完整的翻译键名包含其所在的命名空间。如下本地化消息const messages { en: { message: { the_world: the world, dio: DIO:, linked: :message.dio :message.the_world !!!! } } }模板p{{ $t(message.linked) }}/p输出结果pDIO: the world !!!!/p源码视角链接是如何被识别和替换的链接识别完全在渲染阶段完成。在 src/index.js#L447-L449 中_interpolate会先检查取到的字符串是否包含:或.标记若包含则调用_link方法做链接替换而_linksrc/index.js#L454-L531使用如下正则匹配所有链接片段const linkKeyMatcher /(?:(?:\.[a-zA-Z])?:(?:[\w\-_|./]|\([\w\-_:|./]\)))/g const linkKeyPrefixMatcher /^(?:\.([a-zA-Z]))?:/从正则可以看到链接键名允许包含\w、-、_、|、.、/等字符也可以使用(...)括号包裹形式见下文括号分组一节。测试夹具 test/unit/fixture/index.js 中linkEnd、linkWithin、linkMultiple、linkHyphen、linkUnderscore、linkPipe、linkColon、linkList等用例正是对这些边界字符的回归验证。值得注意的两个安全机制循环引用检测_link内部维护visitedLinkStack若链接形成了 A→B→A 的循环会输出警告Circular reference found.并中止替换src/index.js#L484-L489。测试 test/unit/issues.test.js 用circular1 → circular2 → circular3 → circular1的用例验证了这一行为。回退处理当被链接的键在当前 locale 不存在时会走_isFallbackRoot逻辑回退到根 locale 翻译并发出 fallback 警告。格式化关联本地化消息Formatting Linked Locale Messages某些语言对字符大小写敏感如句首大写此时你可能需要控制关联消息的大小写。关联消息可以使用.modifier:key修饰符语法进行格式化。当前内置以下修饰符upper将关联消息中的所有字符转为大写lower将关联消息中的所有字符转为小写capitalize将关联消息的首字符转为大写。本地化消息示例注意同一份消息中同时给出了en与pt两个 locale 的对照const messages { en: { message: { homeAddress: Home address, missingHomeAddress: Please provide .lower:message.homeAddress } }, pt: { message: { homeAddress: Endereço residencial, missingHomeAddress: Por favor, providencie o .lower:message.homeAddress } } }label{{ $t(message.homeAddress) }}/label p classerror{{ $t(message.missingHomeAddress) }}/p输出结果labelEndereço residencial/label p classerrorPor favor, providencie o Endereço residencial/p源码视角修饰符的默认实现与自定义内置修饰符定义在 src/index.js#L33-L37const defaultModifiers { upper: str str.toLocaleUpperCase(), lower: str str.toLocaleLowerCase(), capitalize: str ${str.charAt(0).toLocaleUpperCase()}${str.substr(1)} }在_link替换过程中src/index.js#L518-L522会优先查找自定义修饰符this._modifiers找不到再回落到defaultModifiers。而this._modifiers正是来自构造函数传入的modifiers选项。你可以通过向VueI18n构造函数传递modifiers选项来新增或覆盖修饰符const i18n new VueI18n({ locale: pt, modifiers: { // 新增一个自定义修饰符 snakeCase: str str.split( ).join(-) }, messages: { // ... }, })这样你就可以在消息中写.snakeCase:message.homeAddress来调用自定义修饰符。测试夹具 test/unit/fixture/index.js 中linkCaseLower、linkCaseUpper、linkCaseCapitalize、linkCaseUnknown、linkCaseCustom五个用例覆盖了内置修饰符、未知修饰符与自定义修饰符的分支。用括号分组Grouping by Brackets关联消息的翻译键也可以写成:(message.foo.bar.baz)的形式即把要链接的翻译键用括号()包起来。这在以下场景非常有用如果链接:message.something后面紧跟一个句点.这个句点会被正则误判为链接的一部分。用括号包裹后即可避免本地化消息const messages { en: { message: { dio: DIO, linked: Theres a reason, you lost, :(message.dio). } }, pt: { message: { dio: DIO, linked: Há uma razão pela qual você falhou, :(message.dio). } } }模板p{{ $t(message.linked) }}/p输出结果pHá uma razão pela qual você falhou, DIO./p在源码层面linkKeyMatcher正则中\([\w\-_:|./]\)分支即专门匹配括号形式而_link中会用link.replace(linkPrefix, ).replace(bracketsMatcher, )去掉括号后再解析键名src/index.js#L482。测试夹具中的linkBrackets: Hello :(message.hoge). Isn\t :(message.hello) great?正是该特性的回归用例。消息函数Message Functionvue-i18n 推荐在翻译时使用基于字符串的列表格式list format或命名格式named format作为本地化消息。然而当语言语法足够复杂时你可能需要 JavaScript 的全部编程能力。此时你可以放弃字符串消息改用消息函数message function。下面的消息函数返回一句简单的问候const messages { en: { greeting: (ctx) Hello! }, pt: { greeting: (ctx) Olá! } }使用消息函数非常简单你只需像普通键一样用$t或t指定键名p{{ $t(greeting) }}/p输出结果pOlá!/p函数的返回值即作为消息内容输出。源码视角消息函数如何被调用在 src/index.js#L553-L570 的_render方法中vue-i18n 会判断取到的消息是否为函数isFunction(message)若是则调用return message( this._createMessageContext(values, this._formatter || defaultFormatter, path, interpolateMode) )即把通过_createMessageContext构造的消息上下文作为唯一参数传入函数。该上下文src/index.js#L533-L551包含list(index)按下标取列表格式的值named(key)按键名取命名格式的值linked(linkedKey)在消息函数内部解析关联消息对应测试 test/unit/message_function.test.jsvalues$t/t传入的原始参数path当前 key pathformatter当前使用的格式化器messages全部本地化消息locale当前 locale。消息函数中的命名格式Named Formattingvue-i18n 支持以字符串为基础的命名格式vue-i18n 会把$t或t传入的参数值插值到消息中并返回结果。消息函数通过消息上下文也可以实现同样的效果。问候示例const messages { en: { greeting: (ctx) Hello, ${ctx.named(name)}! }, pt: { greeting: (ctx) Olá, ${ctx.named(name)}! } }模板p{{ $t(greeting, { name: DIO }) }}/p输出结果pOlá, DIO!/p消息上下文提供named函数。你需要指定与$t或t的命名参数一致的键名它就会解析出对应的值。在_createMessageContext中named的实现为(key) _named[key]其中_named是传入的对象参数src/index.js#L535-L537。对应测试见 test/unit/message_function.test.js。消息函数中的列表格式List Formatting列表格式的用法与命名格式类似。vue-i18n 支持以字符串为基础的列表格式vue-i18n 会把$t或t传入的参数值插值到消息中并返回结果。消息函数通过消息上下文同样可以实现。问候示例const messages { en: { greeting: (ctx) Hello, ${ctx.list(0)}! }, pt: { greeting: (ctx) Olá, ${ctx.list(0)}! } }模板p{{ $t(greeting, [DIO]) }}/p输出结果pOlá, DIO!/p消息上下文提供list函数。你需要指定与$t或t的列表参数下标一致的数字索引它就会解析出对应的值。_createMessageContext中list的实现为(index) _list[index]其中_list是传入的数组参数src/index.js#L534-L536。对应测试见 test/unit/message_function.test.js。消息函数的限制Limitation在消息函数中字符串消息所具备的以下能力无法通过消息上下文获得关联本地化消息linked locale messages——不过消息上下文提供的linked(key)函数可以作为替代方案见测试 test/unit/message_function.test.js复数化pluralization——即$tc所依赖的|分隔复数语法无法在消息函数中生效。此外从官方英文版文档的补充说明可知path、locale、messages、formatter这四个消息上下文属性与 vue-i18n v9.x 及以后的版本不兼容v9 中 MessageContext 只保留list、named、linked等最小接口。如果你在消息函数中使用了这些属性迁移到 v9.x 或更高版本时会遇到困难——这一点在编写新代码时应提前规避尽量只依赖list、named、linked三个函数接口。小结与实战建议回顾本文vue-i18n 的本地化消息体系可以归纳为三个层次静态字符串消息通过嵌套对象、数组与 key path点号 方括号下标组织覆盖绝大多数简单场景关联消息:key、.modifier:key、:(key)三种语法复用既有翻译、控制大小写、处理标点边界配合modifiers选项可无限扩展消息函数(ctx) string形态利用ctx.list/ctx.named/ctx.linked处理复杂语言语法但需注意复数化与 v9 兼容性限制。实际开发中推荐组合使用静态消息作为主体关联消息消除重复文案仅当语法确实复杂到字符串无法表达时才使用消息函数。这些语法的正确性均有 test/unit/message.test.js、test/unit/message_function.test.js 与 test/unit/issues.test.js 中的回归用例背书相关结构定义也可对照 types/index.d.ts 进一步查阅。赞分享前端国际化【免费下载链接】vue-i18n:globe_with_meridians: Internationalization plugin for Vue.js项目地址https://gitcode.com/gh_mirrors/vu/vue-i18n点击查看免费下载相关推荐vue-i18n 本地化消息语法全解消息结构、关联消息Linked Messages与消息函数Message Functionvue i18n 本地化消息语法全解消息结构、关联消息Linked Messages与消息函数Message Function 导读 本文以 vue前端国际化Node.js v0.4.8 发布解读2011 年稳定版的修复清单与现代发布博客工作流Node.js v0.4.8 发布解读2011 年稳定版的修复清单与现代发布博客工作流 Node.js v0.4.8 是 2011 年 5 月发布的稳定版它前端国际化Vue I18n 组件级本地化指南基于组件的 locale 管理、共享消息与函数式组件翻译Vue I18n 组件级本地化指南基于组件的 locale 管理、共享消息与函数式组件翻译 在 vue i18n 中语言环境信息如 locale 、 me前端国际化上一篇OmniAdaptor核心功能揭秘5大特性助力大数据框架无缝协同下一篇5步快速上手openEuler/QA新手如何参与开源操作系统测试创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考