Vue3 vue-i18n消息内链接无空格报错问题求助

你当前使用Vue3结合vue-i18n实现多语言，配置如下：

messages: {
  "en": {
    "title": "Hello @:name",
    "subtitle": "How are you @:name?",
    "name": "Roger",
  },
  "nl": {
    "title": "Hello @:name",
    "subtitle": "How are you @:name?",
    "name": "Roger",
  }
}

遇到的问题是：当@:name这类消息引用插值后直接紧跟非空白字符（比如示例中的?）时，vue-i18n会把后续字符识别为变量名的一部分，导致报错。尝试用括号包裹变量（如(@:name)或@:(name)）无效，且不想保留变量后的空格。

解决方案 #

• 使用大括号包裹变量名
  vue-i18n支持用大括号明确界定消息引用的变量边界，修改后的配置如下：

  messages: {
    "en": {
      "title": "Hello @:{name}",
      "subtitle": "How are you @:{name}?",
      "name": "Roger",
    },
    "nl": {
      "title": "Hello @:{name}",
      "subtitle": "How are you @:{name}?",
      "name": "Roger",
    }
  }
  

  这种方式能让i18n精准识别变量名，不会将后续的?等字符纳入变量名范围，无需保留空格即可正常插值。

• 使用转义字符分隔（备选）
  如果你不想修改插值语法，也可以在变量和后续字符之间添加转义的空白字符（\u00A0，即非换行空格），不过这种方式会在渲染时产生一个不可见的空格，部分场景下可能影响布局，示例如下：

  messages: {
    "en": {
      "subtitle": "How are you @:name\u00A0?",
    }
  }
  

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