Format de message personnalisé

Versions prises en charge

🆕 9.3+

Comme décrit dans la syntaxe du format de message, le format de message de Vue I18n est original.

Si vous souhaitez utiliser un format de message comme le ICU Message Format, vous pouvez utiliser un format personnalisé en implémentant vous-même le compilateur de messages.

WARNING

Cette rubrique nécessite une compréhension du compilation du format de message de Vue I18n et de la manière dont les formats sont résolus.

WARNING

La fonctionnalité est expérimentale. Elle peut recevoir des modifications qui cassent ou être supprimée à l'avenir.

Implémentation du compilateur de messages

Vous pouvez créer un compilateur de messages en implémentant des fonctions avec les interfaces suivantes.

Voici une définition de type TypeScript :

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

Voici un exemple d'implémentation de compilateur de messages qui utilise intl-messageformat pour prendre en charge le format de message ICU.

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') {
    /**
     * Vous pouvez améliorer davantage les performances de votre compilateur de messages avec votre stratégie de cache ou aussi la mémoïsation ici
     */
    const formatter = new IntlMessageFormat(message, locale)
    return (ctx: MessageContext) => {
      return formatter.format(ctx.values)
    }
  } else {
    /**
     * pour AST.
     * Si vous souhaitez le prendre en charge,
     * Vous devez transformer les messages locaux tels que `json`, `yaml`, etc. avec le plugin de bundle.
     */
    onError && onError(new Error('not support for AST') as CompileError)
    return () => key
  }
}

Enregistrement du compilateur de messages

Après avoir implémenté le compilateur de messages, définissez l'option messageCompiler de createI18n comme suit, et vous pouvez utiliser votre format de message pour l'option 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.}
      }`
    }
  }
})

// le code ci-dessous pour vos opérations...
// ...

Référence

Lors de l'implémentation du compilateur de messages, nous vous recommandons de lire et de comprendre les codes de compilation

INFO

Vous pouvez obtenir le code du tutoriel ci-dessous sur examples/message-format.