Vue i18n: повне налаштування інтернаціоналізації з vue-i18n
Від установлення до розгортання у виробничому середовищі: налаштуйте vue-i18n із Composition API, обробляйте форми множини за правилами CLDR, використовуйте інтерполяцію компонентів і додавайте продумані ланцюжки резервних локалей.
Установлення vue-i18n
vue-i18n — офіційний плагін інтернаціоналізації для Vue.js. Він підтримує реактивні переклади, плюралізацію в стилі ICU, інтерполяцію компонентів, форматування дат, часу й чисел, а також Options API та Composition API.
npm install vue-i18n@9Налаштування vue-i18n
Створіть екземпляр i18n за допомогою createI18n() і зареєструйте його як плагін Vue. Визначте повідомлення локалей, задайте локаль за замовчуванням і налаштуйте резервну локаль. vue-i18n підтримує як режим legacy (Options API), так і режим composition (Composition API).
// src/i18n.ts
import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import de from './locales/de.json'
const i18n = createI18n({
legacy: false, // Use Composition API mode
locale: 'en', // Default locale
fallbackLocale: 'en', // Fallback locale
messages: { en, de },
})
export default i18n// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'
const app = createApp(App)
app.use(i18n)
app.mount('#app')Використання перекладів у шаблонах
vue-i18n надає функцію $t() у шаблонах (Options API) і функцію t() з useI18n() (Composition API). Обидві приймають ключ перекладу та необов’язкові іменовані або позиційні параметри для інтерполяції.
// src/locales/en.json
{
"nav": {
"home": "Home",
"about": "About",
"settings": "Settings"
},
"greeting": "Hello, {name}!",
"cart": {
"itemCount": "no items | one item | {count} items"
}
}
// src/locales/de.json
{
"nav": {
"home": "Startseite",
"about": "Über uns",
"settings": "Einstellungen"
},
"greeting": "Hallo, {name}!",
"cart": {
"itemCount": "keine Artikel | ein Artikel | {count} Artikel"
}
}Обробка форм множини
vue-i18n підтримує плюралізацію за допомогою форм, розділених вертикальною рискою, і функції $tc() (режим legacy) або t() із параметром count (Composition API). Визначайте форми множини в повідомленнях локалі за допомогою роздільника: 'no items | one item | {count} items'.
<template>
<div>
<!-- Simple translation -->
<h1>{{ $t('nav.home') }}</h1>
<!-- With variables -->
<p>{{ $t('greeting', { name: userName }) }}</p>
<!-- In attributes -->
<input :placeholder="$t('nav.settings')" />
<!-- Composition API -->
<p>{{ greeting }}</p>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const userName = 'Alice'
const greeting = t('greeting', { name: userName })
</script>Додавання ланцюжків резервних локалей
Вбудований параметр fallbackLocale у vue-i18n підтримує лише простий список резервних локалей, а не окремі ланцюжки для кожної локалі. Якщо для користувача pt-BR немає певного ключа, він побачить англійський переклад замість pt-PT. vue-i18n-locale-chain додає налаштовувані ланцюжки з рекурсивним об’єднанням, щоб користувачі регіональних локалей завжди бачили найближчий доступний переклад.
<template>
<div>
<!-- Pipe-separated plurals -->
<p>{{ $t('cart.itemCount', count) }}</p>
<!-- Named plurals (recommended for complex languages) -->
<p>{{ $t('orders', { n: orderCount }) }}</p>
</div>
</template>
<!-- In your locale file: -->
<!-- "orders": "{n} order | {n} orders" -->Автоматизація перекладів
Налаштувавши vue-i18n, перекладіть файли JSON локалей за допомогою ШІ. У своїй IDE попросіть помічника на основі ШІ перекласти вихідний файл або інтегруйте переклад у pipeline CI/CD для цілковито автоматизованої локалізації.
<template>
<select v-model="locale">
<option v-for="lang in availableLocales" :key="lang" :value="lang">
{{ lang }}
</option>
</select>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale, availableLocales } = useI18n()
</script>// src/i18n.ts
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false,
locale: 'en',
fallbackLocale: 'en',
messages: {},
})
export async function loadLocale(locale: string) {
const messages = await import(`./locales/${locale}.json`)
i18n.global.setLocaleMessage(locale, messages.default)
i18n.global.locale.value = locale
}
export default i18nНалаштування ланцюжка резервних локалей
Налаштуйте окремі ланцюжки резервних локалей, щоб користувачі регіональних локалей бачили найближчий доступний переклад, а не відразу англійський. vue-i18n дає змогу визначати окремі ланцюжки за допомогою fallbackLocale у формі об’єкта.
// src/i18n.ts
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false,
locale: 'pt-BR',
fallbackLocale: {
'pt-BR': ['pt', 'en'],
'zh-Hant-TW': ['zh-Hant', 'zh', 'en'],
'es-419': ['es', 'en'],
default: ['en'],
},
messages: {
en: { /* ... */ },
pt: { /* ... */ },
'pt-BR': { /* ... */ },
},
})Поширені помилки
Поєднання режимів legacy та Composition API
Використання v-html для перекладених рядків
Користувачі регіональних локалей бачать англійський переклад замість батьківської локалі
Спробуйте i18n Agent зараз
Перетягніть сюди файл для перекладу
JSON, YAML, PO, XML, CSV, Markdown, Properties
або натисніть, щоб вибрати
Цільові мови