javascript - vue i18n，如何实现文字动态替换?

Question

vue i18n，如何实现文字动态替换
背景：已有的项目，要把项目中指定的文字改成根据配置文件显示。

现在项目中是这样（JSON文件内的文案都是固定的）：
zh.json

zh: {    hello: '你好，小蓝'  }

组件中：

<p>{{ $t('hello') }}</p>// 显示：你好，小蓝

网上看到的i18动态替换的方案：
zh.json

zh: {    hello: '你好，{name}'  }

组件中：

<p>{{ $t('hello', {name: '小红'}) }}</p>// 显示：你好，小红

但是现在我是已有的项目，项目中上百个地方使用$t，不可能一个个去添加{name: '小红'}
想问问大佬有什么好的解决方案。

Answer 1

我的话就是适用笨办法，使用 ally-i18n 这个插件找到所有用到对应 key 的业务代码，然后去手动替换。

但是如果你的替换有规律的话，可以使用全局批量替换的方式。比如说都是插入的 nickName 这个变量之类的，就可以在VSC里面全局查找 $t('hello') 然后批量替换 $t('hello', {name: this.userInfo.nickName})。

Answer 2

1. 最笨的办法，全局替换 $t('hello') -> $t('hello', {name: '小红'})
2. 写个脚本去处理，思路是把代码用 babel 转成 ast 根据特征去处理，适合处理情况比较复杂的场景