Vue3 i18n变量后添加无空格句号的实现方法

你可以通过用大括号包裹变量名的方式，明确变量的边界，避免标点被解析为变量名的一部分。修改后的翻译配置如下：

"documents-button": "Please see @:{navigation.documents}."

这样配置后，组件中调用{{ $t('documents-button') }}会正确渲染为Please see Documents.，既不会出现多余空格，也不会误识别变量。

原理是Vue I18n的变量插值语法中，@:{变量名}的写法可以精准界定变量范围，后续的标点符号会被当作普通文本处理，完美适配你的需求——既不用修改navigation.documents原变量，也无需在HTML中额外添加标点。

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