Пользовательский формат сообщений

Поддерживаемые версии

🆕 9.3+

Как описано в синтаксисе формата сообщений, формат сообщений Vue I18n является оригинальным.

Если вы хотите использовать формат сообщений, такой как ICU Message Format, вы можете использовать пользовательский формат, реализовав компилятор сообщений самостоятельно.

WARNING

Эта тема требует понимания компиляции формата сообщений Vue I18n и того, как разрешаются форматы.

WARNING

Эта функция является экспериментальной. В будущем она может претерпеть изменения или быть удалена.

Реализация компилятора сообщений

Вы можете создать компилятор сообщений, реализовав функции со следующими интерфейсами.

Следующее — определение типа TypeScript:

export declare type MessageCompiler<Message = string, MessageSource = string | ResourceNode> = (message: MessageSource, context: MessageCompilerContext) => MessageFunction<Message>;

Следующий пример реализации компилятора сообщений использует intl-messageformat для поддержки формата ICU Message.

import IntlMessageFormat from 'intl-messageformat'

import type { MessageCompiler, CompileError, MessageContext } from 'vue-i18n'

export const messageCompiler: MessageCompiler = (
  message,
  { locale, key, onError }
) => {
  if (typeof message === 'string') {
    /**
     * Вы можете дополнительно оптимизировать производительность компилятора сообщений с помощью стратегии кэширования или мемоизации здесь
     */
    const formatter = new IntlMessageFormat(message, locale)
    return (ctx: MessageContext) => {
      return formatter.format(ctx.values)
    }
  } else {
    /**
     * для AST.
     * Если вы хотите поддерживать это,
     * вам нужно преобразовать локализованные сообщения, такие как `json`, `yaml` и т.д., с помощью плагина сборки.
     */
    onError && onError(new Error('not support for AST') as CompileError)
    return () => key
  }
}

Регистрация компилятора сообщений

После реализации компилятора сообщений установите параметр messageCompiler в createI18n следующим образом, и вы сможете использовать свой формат сообщений в параметре messages:

import { createI18n } from 'vue-i18n'
import { messageCompiler } from './compilation'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messageCompiler,
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    }
  }
})

// ниже ваш код ...
// ...

Ссылка

При реализации компилятора сообщений рекомендуется ознакомиться и понять код компиляции

INFO

Вы можете получить код для примера ниже в examples/message-format.