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 поддържа както стария режим (Options API), така и композиционния режим (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() (стар режим) или t() с параметър за брой (Composition API). Задайте формите за множествено число в съобщенията за езиковата настройка чрез разделителя с вертикална черта: 'няма елементи | един елемент | {count} елемента'.
<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 можете да поискате от Вашия асистент с ИИ да преведе изходния файл или да включите превода във Вашия 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': { /* ... */ },
},
})Често срещани затруднения
Смесване на стария режим с режима на Composition API
Използване на v-html за преведени текстове
Регионалните потребители виждат английски вместо родителската езикова настройка
Изпробвайте i18n Agent сега
Пуснете тук Вашия файл за превод
JSON, YAML, PO, XML, CSV, Markdown, Properties
или натиснете, за да изберете файл
Целеви езици