使用xgettext从VueJS文件中提取可翻译的字符串

Question

我正在尝试使用xgettext从VueJS文件中提取要翻译的字符串。不过，我无法让xgettext识别VueJS计算属性中的JS。

例如，我的<template>中有一个元素，如下所示：

<input :placeholder="translator.gettext('Phone')" />

当像这样运行xgettext时，它不能被拾取：

xgettext --from-code=UTF-8 --language=JavaScript

但是如果我有一个可翻译的字符串作为函数调用，它就会被拾取。例如：

<div>{{ translator.gettext('This is picked up 1') }}</div>
<input :placeholder="translator.gettext('This is NOT picked up')" />
<div>{{ translator.gettext('This is picked up 2') }}</div>

未选取input占位符，但选取了其他两个字符串。

我相信这是因为xgettext认为html属性中的任何内容都只是一个字符串，但VueJS会将以:为前缀的属性中的任何值都作为纯JavaScript运行。

有没有办法让xgettext理解这段代码是JS而不只是一个字符串？

Answer 1

我认为翻译不适用于属性。也许您可以尝试使用计算属性来实现，如下所示：

computed: {
   placeholderText () {
     return this.translator.gettext('This is a text')
   },
},

然后在模板中使用此计算属性，如下所示：

<input :placeholder="placeholderText" />

或者，您可以为此创建一个过滤器，如下所示：

Vue.filter('translate', value => {
  return !value ? '' : Vue.prototype.translator.gettext(value.toString())
})

然后像这样使用它：

<input :placeholder="'This is a text' | translate" />