使用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占位符未拾取，但其他2个字符串被拾取。

我相信这是因为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" />