Настройка vue-i18n и файлов сообщений
createI18n(), JSON-файлы локалей, синтаксис сообщений {name}, вложенные ключи и резервная локаль
«Настройка vue-i18n и файлов сообщений» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое i18n
Интернационализация (i18n) — это создание app так, чтобы он мог отображать текст на нескольких языках. Vue I18n — библиотека официального стиля для перевода приложений Vue.
Вместо жёстко заданных строк на английском языке вы обращаетесь к ключам, которые разрешаются в активный язык.
Установка Vue I18n
Добавьте пакет. Для Vue 3 используйте версию 9 или более позднюю: она построена вокруг API композиции.
// terminal
// npm install vue-i18nФайлы сообщений
Переводы хранятся в объектах сообщений, по одному для каждой локали. Ключи соответствуют переведённым строкам. Начните с английского языка.
const en = {
greeting: "Hello",
nav: {
home: "Home",
about: "About",
},
}Добавление турецкой локали
Каждая локаль должна отражать одну и ту же структуру ключей, чтобы каждый ключ существовал на каждом языке.
const tr = {
greeting: "Merhaba",
nav: {
home: "Ana Sayfa",
about: "Hakkinda",
},
}Создание экземпляра i18n
createI18n создаёт экземпляр. Задайте locale (активный язык), fallbackLocale (используется, если ключ отсутствует) и карту messages.
import { createI18n } from "vue-i18n"
const i18n = createI18n({
legacy: false,
locale: "en",
fallbackLocale: "en",
messages: { en, tr },
})Зачем нужен legacy: false
Установка legacy: false включает режим API композиции, который используется в современных приложениях Vue 3. Он открывает доступ к композаблу useI18n, с которым вы познакомитесь на следующем уроке.
const i18n = createI18n({
legacy: false, // Composition API mode
locale: "en",
messages: { en, tr },
})Регистрация в app
Подключите экземпляр как плагин с помощью app.use(i18n). Это делает вспомогательные средства перевода доступными во всём дереве компонентов.
import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
app.use(i18n)
app.mount("#app")Использование $t в шаблонах
После установки каждый шаблон может вызвать $t(key), чтобы найти перевод в активной локали.
<template>
<h1>{{ $t("greeting") }}</h1>
<a>{{ $t("nav.home") }}</a>
</template>Как работает fallbackLocale
Если ключ отсутствует в активной локали, Vue I18n использует fallbackLocale, а не показывает исходный ключ. Благодаря этому интерфейс остаётся понятным, пока перевод ещё выполняется.
// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English textИнтерполяция с заполнителями
Сообщения могут содержать именованные заполнители в фигурных скобках. Передайте значения вторым аргументом, чтобы подставить их.
const en = {
welcome: "Welcome, {name}!",
}
// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"Организация файлов сообщений
В реальных приложениях помещайте каждую локаль в отдельный файл (en.json, tr.json) и импортируйте их. Так переводами проще управлять, а переводчики могут работать независимо.
// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"
createI18n({ locale: "en", messages: { en, tr } })Быстрая проверка
Проверьте, насколько хорошо вы поняли настройку Vue I18n.
Повторение
Вы настроили Vue I18n:
- i18n означает отображение текста на нескольких языках с помощью поиска по ключам.
- Определяйте объект сообщений для каждой локали с одинаковой структурой ключей.
createI18nпринимаетlocale,fallbackLocaleиmessages; используйтеlegacy: falseдля режима композиции.- Подключайте i18n с помощью
app.use(i18n), а перевод в шаблонах выполняйте с помощью$t(key). - Заполнители, такие как
{name}, подставляются через второй аргумент.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Настройка vue-i18n и файлов сообщений» бесплатный?
Да — полный текст урока «Настройка vue-i18n и файлов сообщений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Настройка vue-i18n и файлов сообщений»?
createI18n(), JSON-файлы локалей, синтаксис сообщений {name}, вложенные ключи и резервная локаль Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Настройка vue-i18n и файлов сообщений»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка vue-i18n и файлов сообщений
- Композируемый модуль useI18n и функция t()
- Множественное число и связанные сообщения
- Форматирование чисел, дат и валют