使用 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 将运行 [=41] 中的任何值=] 前缀为 : 作为纯 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" />

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

Using xgettext to extract translatable strings from VueJS file

javascript

gettext

xgettext

vue.js