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

时间:2018-10-10 22:04:21

标签: javascript html vue.js gettext

我有很多包含静态文本的组件,我想使用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的新手,努力解决如何翻译这些文本(假设我有很多静态文本)。

1 个答案:

答案 0 :(得分:3)

我搜索了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>
相关问题