gettext有些不能翻译_使用gettext翻译您的Vue.js应用程序

gettext有些不能翻译

vue-gettext (vue-gettext)

Translate Vue.js applications with gettext.

使用gettext转换Vue.js应用程序。

vue-gettext is a plugin to translate Vue.js applications with gettext. It relies on the GNU gettext toolset and easygettext.

vue-gettext是一个使用gettext转换Vue.js应用程序的插件。 它依赖于GNU gettext工具集和easygettext。

View demo 查看演示 Download Source 下载源

贡献 (Contribution)

Please make sure to read the Pull request guidelines before making a pull request.

在发出请求之前，请确保阅读“请求请求准则”。

安装 (Installation)

NPM (NPM)

npm install vue-gettext

基本安装 (Basic installation)

Basic installation with ES6 modules:

使用ES6模块的基本安装：

// ES6
import Vue from 'vue'
import GetTextPlugin from 'vue-gettext'
import translations from './path/to/translations.json'

Vue.use(GetTextPlugin, {translations: translations})

组态 (Configuration)

There are a number of options you can use to configure the vue-gettext plugin:

您可以使用许多选项来配置vue-gettext插件：

Option	Type	Requirement	Description
translations	{Object}	required	The JSON file of the application's translations (produced by gettext-compile). It's exposed as a Vue global property as Vue.$translations
availableLanguages	{Object}	optional	An object that represents the list of the available languages for the app whose keys are local names (e.g. en or en_US) and whose values are language names used for the display in UI, e.g. English (United States). It's exposed in all Vue instances via vm.$language.available
defaultLanguage	{String}	optional	The local name of the default language, e.g. en_US. This will be the current active language. It's exposed in all Vue instances via vm.$language.current
languageVmMixin	{Object}	optional	A mixin that will be passed to the main languageVm instance (exposed via $language) that can be used, for example, to add custom computed properties
silent	{Boolean}	optional	Enable or disable logs/warnings for missing translations and untranslated keys. Default value is Vue.config.silent.
muteLanguages	{Array}	optional	Discard warnings for missing translations for all languages of the list. This is useful to avoid messages from the language used in source code.

选项	类型	需求	描述
translations	{Object}	需要	应用程序翻译的JSON文件(由gettext-compile )。 它作为Vue公开为Vue的全局属性Vue.$translations
availableLanguages	{Object}	可选的	一个对象，代表该应用程序可用语言的列表，这些应用程序的键是本地名称 (例如en或en_US )，其值是用于UI中显示的语言名称 ，例如English (United States) 。 它通过vm.$language.available在所有Vue实例中公开
defaultLanguage	{String}	可选的	默认语言的本地名称 ，例如en_US 。 这将是当前使用的语言。 它通过vm.$language.current在所有Vue实例中公开
languageVmMixin	{Object}	可选的	一个mixin ，将传递给主要的languageVm实例(通过$language公开)，可用于添加自定义计算属性
silent	{Boolean}	可选的	为缺少的翻译和未翻译的键启用或禁用日志/警告。 默认值为Vue.config.silent 。
muteLanguages	{Array}	可选的	丢弃列表中所有语言缺少翻译的警告。 这对于避免来自源代码中使用的语言的消息很有用。

Example:

例：

// 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',
    es_US: 'Español',
    fr_FR: 'Français',
    it_IT: 'Italiano',
  },
  defaultLanguage: 'fr_FR',
  languageVmMixin: {
    computed: {
      currentKebabCase: function () {
        return this.current.toLowerCase().replace('_', '-')
      },
    },
  },
  translations: translations,
  silent: True,
})

vm.$language (vm.$language)

After the plugin initialization, a languageVm Vue instance is injected into every component as vm.$language.

插件初始化后，将languageVm Vue实例作为vm.$language注入到每个组件中。

It exposes the following properties:

它公开了以下属性：

• vm.$language.available: an object that represents the list of the available languages (defined at configuration time)

  vm.$language.available ：一个代表可用语言列表的对象(在配置时定义)

• vm.$language.current: the current language (defined at configuration time)

  vm.$language.current ：当前语言(在配置时定义)

• whatever you passed to the plugin mixin

  无论您传递给插件mixin

You can use vm.$language.current and vm.$language.available to e.g. easily build a language switch component with a single template:

您可以使用vm.$language.current和vm.$language.available例如使用一个模板轻松构建语言切换组件：

<template>
  <div>
    <select name="language" v-model="$language.current">
      <option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
    </select>
  </div>
</template>

Vue.config.language (Vue.config.language)

After the plugin initialization, a global and reactive language property is added to Vue.config that you can use to get or set the current language outside of Vue instances.

插件初始化后， Vue.config全局和响应language属性添加到Vue.config ，您可以使用该属性在Vue实例外部获取或设置当前语言。

> Vue.config.language
'en_GB'
> Vue.config.language = 'fr_FR'

You can use Vue.config.language to e.g. configure a third party plugin in a filter:

您可以使用Vue.config.language例如在过滤器中配置第三方插件：

import moment from 'moment'
import Vue from 'vue'

const dateFormat = function (value, formatString) {
  moment.locale(Vue.config.language)
  return moment(value).format(arguments.length > 1 ? formatString : 'dddd D MMMM HH:mm:ss')
}

工作流程 (Workflow)

1. Annotate your strings

   注释字符串

2. Extract translations (make makemessages)

   提取翻译( make makemessages )

3. Translate message files

   翻译消息文件

4. Compile translations (make translations)

   编译翻译( make translations )

Annotate    |       Extract        |              Translate                 |        Compile
--------------------------------------------------------------------------------------------------------
component.js
component.vue ---> /tmp/template.pot ---> app/locale/fr_FR/LC_MESSAGES/app.po ---> app/translations.json
template.html

1a)在模板( .html或.vue文件)中注释字符串 (1a) Annotating strings in templates (.html or .vue files))

使用组件或指令 (Use the component or the directive)

Strings are marked as translatable in your templates using either the translate component or the v-translate directive:

使用translate组件或v-translate指令，字符串在模板中被标记为可翻译的：

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

This will automatically be translated. For instance, in French, it might read Bonjour !.

这将自动翻译。 例如，在法语中，它可能显示为Bonjour！ 。

单数 (Singular)

<translate>Hello!</translate>

复数 (Plural)

<translate :translate-n="count" translate-plural="%{ count } cars">%{ count } car</translate>

语境 (Context)

<translate translate-context="Verb">Foo</translate>

评论 (Comment)

<translate translate-comment="My comment for translators">Foo</translate>

自订参数 (Custom parameters)

You can set up translation strings that are agnostic to how your app state is structured. This way you can change variable names within your app, it won't break your translation strings.

您可以设置与应用状态结构无关的翻译字符串。 这样，您可以在应用程序中更改变量名，不会破坏您的翻译字符串。

<translate :translate-params="{name: userFullName}">Foo %{name}</translate>

HTML支持：组件和指令之间的区别 (HTML support: difference between the component and the directive)

It proves to be tricky to support interpolation with HTML content in Vue.js components because it's hard to access the raw content of the component itself.

在Vue.js 组件中支持HTML内容插值非常困难，因为很难访问组件本身的原始内容。

So if you need to include HTML content in your translations you may use the directive.

因此，如果您需要在翻译中包含HTML内容，则可以使用指令 。

The directive has the same set of capabilities as the component, except for translate-params which should be passed in as an expression.

该指令具有与组件相同的功能集， 除了应该作为表达式传递的translate-params 。

<p
  v-translate='{count: carNumbers}'
  :translate-n="carNumbers"
  translate-plural="<strong>%{ count }</strong> cars"
  translate-comment="My comment for translators"
  >
  <strong>%{ count }</strong> car
</p>

translate组件的自定义HTML标记 (Custom HTML tag for the translate component)

When rendered, the content of the translate component will be wrapped in a span element by default. You can also use another tag:

呈现时，默认情况下， translate组件的内容将包装在span元素中。 您还可以使用另一个标签：

<translate tag="h1">Hello!</translate>

翻译自: https://vuejsexamples.com/translate-your-vue-js-applications-with-gettext/

gettext有些不能翻译