Начало работы

Создание глобального приложения с помощью Vue + Vue I18n очень просто. С помощью Vue.js мы уже создаем наше приложение с помощью компонентов. Когда мы добавляем Vue I18n в этот процесс, все, что нам нужно сделать, это подготовить сообщения ресурсов и просто использовать API локализации, предоставляемое Vue I18n.

ПРИМЕЧАНИЕ

В этом руководстве предполагается, что вы уже знакомы с самим Vue. Вам не обязательно быть экспертом по Vue, но иногда вам может понадобиться обратиться к основной документации Vue за дополнительной информацией о некоторых функциях.

Пример

мы рассмотрим следующий пример:

• Пример на StackBlitz

Начнем с того, что посмотрим на главный компонент App.vue.

App.vue

<template>
  <h1>{{ $t('message.hello') }}</h1>
</template>

В шаблоне мы используем API перевода $t, внедренное с помощью Vue I18n, для локализации. Это позволяет Vue I18n менять локаль без перезаписи шаблона, а также поддерживать глобальное приложение.

Вы получите следующий вывод:

<h1>こんにちは、世界</h1>

Посмотрим, как это реализуется в JavaScript!

Создание экземпляра i18n

Экземпляр i18n создается вызовом функции createI18n.

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

Мы можем указать несколько опций для createI18n. Важные опции - это locale, fallbackLocale и messages.

locale - это язык приложения Vue, который будет локализован.

fallbackLocale - это язык, к которому происходит возврат, если ключ ресурса, указанный в API перевода $t, не найден на языке locale.

messages - это сообщения локали для перевода с помощью API перевода $t. Структура сообщений локали представляет собой иерархическую структуру объектов с каждым локалем в качестве верхнего свойства

Регистрация плагина i18n

Как только мы создали экземпляр i18n, нам нужно зарегистрировать его как плагин, вызвав use в нашем приложении:

const app = createApp(Vue)
app.use(i18n)
app.mount('#app')

Как и с большинством плагинов Vue, вызов use должен происходить до вызова mount.

Если вас интересует, что делает этот плагин, некоторые из его обязанностей включают:

1. Добавление глобальных свойств и методов, таких как $t, $i18n
2. Включение компонентов useI18n
3. Глобальная регистрация компонентов i18n-t, i18n-d и i18n-n.

Соглашения в этом руководстве

Однофайловые компоненты

Vue I18n чаще всего используется в приложениях, созданных с помощью сборщика (например, Vite) и SFCs (то есть файлов .vue). Большинство примеров в этом руководстве будут написаны в этом стиле, но само Vue I18n не требует использования инструментов сборки или однофайловых компонентов.

Например, если вы используете глобальные сборки Vue и Vue I18n, библиотеки доступны через глобальные объекты, а не через импорты:

const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

Стиль API компонентов

Vue I18n может использоваться как с Composition API, так и с Options API. Где это уместно, примеры в этом руководстве будут показывать компоненты, написанные в обоих стилях. Примеры Composition API обычно используют <script setup>, а не явную функцию setup.

Если вам нужен напоминание о двух стилях, см. Vue - Стили API.

Vue I18n работает как с Composition API, так и с Options API. Vue I18n имеет два стиля API, подобно Vue: Composition API и Legacy API для использования с Options API.

ВАЖНО

В Vue I18n v9 и более поздних версиях API, предлагаемый Vue I18n v8.x, называется режимом Legacy API. Legacy API устарел в Vue I18n v11 и будет удален в Vue I18n v12. Рекомендуется использовать режим Composition API.

В следующих разделах будет объяснено с использованием Legacy API.

Если вы хотите использовать его в стиле Composition API и уже понимаете Vue I18n, вы можете перейти сюда.