如何在 vue 中使用 gettext 翻译文本?

Question

我有很多包含静态文本的组件，我想使用 gettext 插件将这些文本从波兰语翻译成英语，反之亦然。

这是文本在我的组件中的外观.

<h1>   {{ __('Mail kontaktowy') }}</h1>
<p>   {{ __('Dziękujemy za kontakt') }}</p>
<h3>   {{ __('Twoja wiadomość') }}</h3>

我根据在线文档尝试的解决方案

已安装的插件：

npm install vue-gettext

这是根据我需求的配置

// ES6
import Vue from 'vue'
import GetTextPlugin from 'vue-gettext'
import translations from './path/to/translations.json'
Vue.use(GetTextPlugin, {
availableLanguages: {
en_GB: 'British English',
en_US: 'American English',
pl_PL: 'Polish',
},
defaultLanguage: 'pl_PL',
languageVmMixin: {
computed: {
currentKebabCase: function () {
return this.current.toLowerCase().replace('_', '-')
},
},
},
translations: translations,
silent: True,
})

HTML 调用 gettext 来翻译这些文本

<h1 v-translate>{{ __('Mail kontaktowy') }}</h1>

这行不通，我在实现中做错了什么？请帮助我是 vue 的新手，正在努力如何翻译这些文本(假设我有很多静态文本(。

Answer 1

我搜索了 vue-gettext 并从这里的文档中： https://vuejsexamples.com/translate-your-vue-js-applications-with-gettext/，您可以使用翻译组件翻译文本：

<translate>Hello!</translate>

或使用 V-translate 指令：

<span v-translate>Hello!</span>

我认为在您的代码中使用__没有用，除非您有该功能。我认为这已经有效了：

<h1 v-translate>Mail kontaktowy</h1>