时间戳

首页 > 解决方案 > 使用 xgettext 从 VueJS 文件中提取可翻译的字符串

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

问题描述

我正在尝试使用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 会将以 a 为前缀的属性中的任何值:作为纯 JavaScript 运行。

有什么办法可以xgettext理解这段代码是 JS 而不仅仅是字符串？

标签： javascriptvue.jsgettextxgettext

解决方案

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

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

推荐阅读