使用vue-i18n链接消息时如何正确处理特殊字符？

你遇到的是vue-i18n链接消息的解析边界问题：当链接的消息key后面紧跟非空白字符（比如逗号、单引号）时，解析器无法正确识别完整的key，导致替换失效。

解决方法很简单，用大括号{}把链接的key包裹起来，明确界定key的范围即可：

{
  "person": {
    "firstName": "First name"
  },
  "input": {
    "placeholder": "Insert @:person.firstName", // 正常工作，输出"Insert First name"
    "ex1": "Lorem @:{person.firstName}, hello!", // 修复后输出"Lorem First name, hello!"
    "ex2": "Lorem '@:{person.firstName}'" // 修复后输出"Lorem 'First name'"
  }
}

这种语法是vue-i18n内置支持的，用来避免key和后续字符混淆。只有当key后面是空白字符时可以省略大括号，若紧跟其他字符，必须添加大括号才能让解析器正确识别完整的链接key。

内容的提问来源于stack exchange，提问作者PyKKe