Skip to content

vue-i18n / general / ComposerOptions

接口:ComposerOptions<Schema, Locales, MessagesLocales, DateTimeFormatsLocales, NumberFormatsLocales, MessageSchema, DateTimeSchema, NumberSchema, _Messages, _DateTimeFormats, _NumberFormats>

Composer 选项

备注

这是创建 composer 的选项。

Vue I18n 组合式 API

类型参数

类型参数默认类型
Schema extends objectobject
Locales extends | { datetimeFormats: unknown; messages: unknown; numberFormats: unknown; } | stringLocale
MessagesLocalesLocales extends object ? M : Locales extends string ? Locales : Locale
DateTimeFormatsLocalesLocales extends object ? D : Locales extends string ? Locales : Locale
NumberFormatsLocalesLocales extends object ? N : Locales extends string ? Locales : Locale
MessageSchemaSchema extends object ? M : DefaultLocaleMessageSchema
DateTimeSchemaSchema extends object ? D : DefaultDateTimeFormatSchema
NumberSchemaSchema extends object ? N : DefaultNumberFormatSchema
_Messages extends LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>
_DateTimeFormats extends IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>
_NumberFormats extends IntlNumberFormats<NumberSchema, NumberFormatsLocales>IntlNumberFormats<NumberSchema, NumberFormatsLocales>

属性

datetimeFormats?

ts
optional datetimeFormats: { [K in string | number | symbol]: DateTimeSchema };

备注

本地化的日期时间格式。

参见:

默认值

{}


escapeParameter?

ts
optional escapeParameter: boolean;

备注

如果配置 escapeParameter 为 true,则在翻译消息前转义插值参数。

当翻译输出用于 v-html 且翻译资源包含 HTML 标记(例如围绕用户提供的值)时,这很有用。

这种使用模式主要发生在将预计算的文本字符串传递给 UI 组件时。

转义过程涉及将以下符号替换为其相应的 HTML 字符实体:<, >, ", '

escapeParameter 设置为 true 不会破坏现有功能,但提供了针对微妙的 XSS 攻击向量的防护。

参见:

默认值

false


fallbackFormat?

ts
optional fallbackFormat: boolean;

备注

当您的语言缺少某个键的翻译时,是否对翻译键进行模板插值。

如果为 true,则跳过为您“基础”语言编写模板;键就是您的模板。

参见:

默认值

false


fallbackLocale?

ts
optional fallbackLocale: FallbackLocale;

备注

回退本地化的语言。

有关更复杂的回退定义,请参见 fallback。

参见:

默认值

如果未指定 locale 或其值为 locale 值,则默认为 'en-US'


fallbackRoot?

ts
optional fallbackRoot: boolean;

备注

在组件本地化中,当本地化失败时是否回退到根级别(全局作用域)本地化。

如果为 false,则不回退到根级别。

参见:

默认值

true


fallbackWarn?

ts
optional fallbackWarn: boolean | RegExp;

备注

当回退到 fallbackLocale 或根级别时是否抑制警告。

如果为 false,则抑制回退警告。

如果您使用正则表达式,可以抑制与翻译键匹配的回退警告(例如 t)。

参见:

默认值

true


flatJson?

ts
optional flatJson: boolean;

备注

允许使用扁平 JSON 消息

默认值

false


inheritLocale?

ts
optional inheritLocale: boolean;

备注

是否继承根级别的语言到组件本地化语言。

如果为 false,无论根级别语言如何,都会为每个组件语言进行本地化。

参见:

默认值

true


locale?

ts
optional locale: string;

备注

本地化的语言。

如果语言包含地区和方言,则该语言包含隐式回退。

参见:

默认值

'en-US'


messageCompiler?

ts
optional messageCompiler: MessageCompiler;

备注

自定义消息格式的编译器。

如果不指定,则将使用 vue-i18n 默认的消息编译器。

您需要实现自己的消息编译器,返回消息函数。

示例

以下是使用 intl-messageformat 实现自定义消息编译器的示例

js
import { createI18n } from 'vue-i18n'
import IntlMessageFormat from 'intl-messageformat'

function messageCompiler(message, { locale, key, onError }) {
  if (typeof message === 'string') {
    // 您可以通过缓存策略或此处的 memoization 来优化消息编译器性能
    const formatter = new IntlMessageFormat(message, locale)
    return ctx => formatter.format(ctx.values)
  } else {
    // 如果您希望支持 AST,
    // 您需要使用捆绑插件将本地化消息转换为 `json`、`yaml` 等格式。
    onError && onError(new Error('not support for AST'))
    return () => key // 返回默认值 `key`
  }
}

// 使用 I18n 选项调用
const i18n = createI18n({
  locale: 'ja',
  messageCompiler, // 设置您的消息编译器
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      // ICU 消息格式
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    },
  }
})

// 下面是您的某些操作...
// ...

TIP

: new: v9.3+

WARNING

自定义消息格式是一个实验性功能。它可能会接收破坏性变更或在未来被移除。

参见:

默认值

undefined


messageResolver?

ts
optional messageResolver: MessageResolver;

备注

解析 messages 的消息解析器。

如果不指定,默认将使用 vue-i18n 内部消息解析器。

您需要实现自己的消息解析器,满足以下要求:

  • 使用消息解析器第一个参数传入的语言消息和第二个参数传入的路径来解析消息。
  • 如果无法解析消息,则需要返回 null
  • 如果您返回了 null,当启用 fallbackLocale 时,消息解析器也会在回退时被调用,因此也需要解析消息。

消息解析器间接由以下 API 调用:

示例

以下是使用 createI18n 设置它的示例:

js
import { createI18n } from 'vue-i18n'

// 您的消息解析器
function messageResolver(obj, path) {
  // 简单的消息解析!
  const msg = obj[path]
  return msg != null ? msg : null
}

// 使用 I18n 选项调用
const i18n = createI18n({
  locale: 'ja',
  messageResolver, // 设置您的消息解析器
  messages: {
    en: { ... },
    ja: { ... }
  }
})

// 下面是您的某些操作...
// ...

TIP

🆕 v9.2+

WARNING

如果您使用消息解析器,Composer#flatJson 设置将被忽略。也就是说,您需要自己解析扁平 JSON。

参见:

默认值

undefined


messages?

ts
optional messages: { [K in string | number | symbol]: MessageSchema };

备注

本地化的语言消息。

参见:

默认值

{}


missing?

ts
optional missing: MissingHandler;

备注

本地化缺失的处理程序。

该处理程序在本地化目标语言、本地化路径键、Vue 实例和值上调用。

如果分配了缺失处理程序,并且发生本地化缺失,则不会发出警告。

默认值

null


missingWarn?

ts
optional missingWarn: boolean | RegExp;

备注

当本地化失败时是否抑制警告输出。

如果为 false,则抑制本地化失败警告。

如果您使用正则表达式,可以抑制与翻译键匹配的本地化失败警告(例如 t)。

参见:

默认值

true


modifiers?

ts
optional modifiers: LinkedModifiers<VueMessageType>;

备注

链接消息的自定义修饰符。

参见:


numberFormats?

ts
optional numberFormats: { [K in string | number | symbol]: NumberSchema };

备注

本地化的数字格式。

参见:

默认值

{}


pluralRules?

ts
optional pluralRules: PluralizationRules;

备注

词语复数规则集

参见:

默认值

{}


postTranslation?

ts
optional postTranslation: PostTranslationHandler<VueMessageType>;

备注

翻译后的处理程序。

该处理程序在调用 t 之后被调用。

此处理程序对于过滤翻译后的文本(如空格修剪)很有用。

默认值

null


warnHtmlMessage?

ts
optional warnHtmlMessage: boolean;

备注

是否允许使用 HTML 格式的本地化消息。

参见 warnHtmlMessage 属性。

参见:

默认值

true