使用 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" />