vue-i18n 插件的命名插值打包后失效

今天我的工具网站增加了一个新功能——图片工具箱，但一发布就发现了一个严重问题：i18n 的命名插值没有效果。

比如有这样一个模板：'已转换：{msg}'，翻译代码是这样：t('xxx.xxx.key', { msg: '1/10' })，最终呈现的效果应该是：已转换：1/10。这在本地开发的时候是没有问题的，但打包发布之后就不行了，显示的就是模板字符串，并没有替换大括号里的内容。

于是，我立即又看了一下之前发布的一个工具——Mini Pixel Design，那个工具在创建的图片超过 1000 像素的时候也会有一个插值模板的提示。果然，也是有问题的。

我……没办法，试试升级插件版本吧，结果从 9.2 一路升级到 9.13，问题还是没解决。总不能自己写函数翻译吧，虽然可以解燃眉之急，但这么一个广泛使用的插件难道就一直存在这么严重的 bug 吗？

然后我在 github 的 issue 里找到了答案——Named interpolation doesn’t work when app is built。

Named interpolation doesn’t work when app is built

这两个回答表示，需要设置选项 runtimeOnly 为 false。这个选项是 unplugin-vue-i18n 的。我用的是 quasar 插件，项目里并没有直接使用这个插件，但在 quasar.config.js 文件的 vitePlugins 部分有相关配置：

// if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
// you need to set `runtimeOnly: false`
runtimeOnly: false,

一开始这里是的配置是注释掉的，取消注释之后重新打包就可以了。

另外，相关 issue 下面还关联了两个 issue：

vue-i18n runtimeOnly 设置可能导致 Service Worker 失败

这里是说如果 runtimeOnly 设为 false，开发环境下的 Service Worker 会失败，但我本地试了下，并没有问题，所以这个问题应该是解决了。