Skip to main content

Vue i18n: pilnīga internacionalizācijas iestatīšana ar vue-i18n

No instalēšanas līdz produkcijai: konfigurējiet vue-i18n ar Composition API, apstrādājiet daudzskaitli pēc CLDR kārtulām, izmantojiet komponentu interpolāciju un pievienojiet viedas lokāļu atkāpšanās ķēdes.

1

Instalējiet vue-i18n

vue-i18n ir oficiālais Vue.js internacionalizācijas spraudnis. Tas nodrošina reaktīvus tulkojumus, ICU stila daudzskaitli, komponentu interpolāciju, datuma, laika un skaitļu formatēšanu un atbalsta gan Options API, gan Composition API.

Terminal
npm install vue-i18n@9
2

Konfigurējiet vue-i18n

Izveidojiet i18n instanci ar createI18n() un reģistrējiet to kā Vue spraudni. Definējiet lokāļu ziņojumus, iestatiet noklusējuma lokāli un konfigurējiet atkāpšanās lokāli. vue-i18n atbalsta gan mantoto (Options API), gan kompozīcijas (Composition API) režīmu.

src/i18n.ts
// 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
// 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')
Ja redzat kļūdas „Not available in legacy mode“, jūs jaucat Composition API i18n izsaukumus (useI18n()) ar mantotā režīma konfigurāciju. Lai izmantotu Composition API režīmu, createI18n() iestatiet legacy: false vai konsekventi izmantojiet Options API $t() sintaksi.
3

Izmantojiet tulkojumus veidnēs

vue-i18n nodrošina funkciju $t() veidnēs (Options API) un funkciju t() no useI18n() (Composition API). Abas pieņem tulkojuma atslēgu un neobligātus nosauktus vai saraksta parametrus interpolācijai.

src/locales/en.json
// 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"
  }
}
4

Apstrādājiet daudzskaitli

vue-i18n atbalsta daudzskaitli ar vertikālo svītru atdalītām formām un funkciju $tc() (mantotajā režīmā) vai t() ar skaita parametru (Composition API). Lokāles ziņojumos definējiet daudzskaitļa formas ar vertikālo svītru: 'no items | one item | {count} items'.

MyComponent.vue
<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>
Ar vertikālo svītru atdalītā daudzskaitļa sintakse atbalsta tikai pamata daudzskaitli ar ne vairāk kā trim formām (zero | one | other). Valodām ar sarežģītām CLDR daudzskaitļa kārtulām (arābu, krievu, poļu) izmantojiet ICU MessageFormat sintaksi vai @.plural modifikatoru ar konkrētu CLDR kategoriju kartējumu.
5

Pievienot lokalizāciju atkāpšanās ķēdes

vue-i18n iebūvētā fallbackLocale atbalsta tikai plakanu atkāpšanās lokāļu sarakstu, nevis katrai lokālei paredzētas ķēdes. Ja pt-BR lietotājam trūkst atslēgas, notiek atkāpšanās uz angļu, nevis pt-PT valodu. vue-i18n-locale-chain pievieno konfigurējamas dziļās sapludināšanas ķēdes, lai reģionu lietotāji vienmēr redzētu tuvāko pieejamo tulkojumu.

Plurals.vue
<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-locale-chain dziļi sapludina ziņojumus ielādes laikā. Sapludināto ziņojumu kopu kešatmiņā glabā vue-i18n reaktivitātes sistēma, tāpēc atkāpšanās uzmeklēšana nerada veiktspējas zudumu izpildlaikā.
6

Automatizēt tulkošanu

Kad vue-i18n ir konfigurēts, tulkojiet lokāļu JSON failus ar MI. IDE vidē lūdziet MI asistentam iztulkot avota failu vai integrējiet tulkošanu CI/CD konveijerā pilnībā automatizētai lokalizācijai.

LanguageSwitcher.vue
<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 (lazy loading)
// 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
7

Lokāles atkāpšanās ķēdes konfigurācija

Konfigurējiet katrai lokālei paredzētas atkāpšanās ķēdes, lai reģionu lietotāji redzētu tuvāko pieejamo tulkojumu, nevis uzreiz pārietu uz angļu valodu. vue-i18n atbalsta objekta veida fallbackLocale, lai definētu ķēdes katrai lokālei.

src/i18n.ts
// 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': { /* ... */ },
  },
})
fallbackLocale objekts ļauj definēt atšķirīgas ķēdes dažādām lokālēm. pt-BR lietotājs atkāpjas uz pt un pēc tam en, savukārt zh-Hant-TW lietotājs — uz zh-Hant, zh un tad en.

Biežākās kļūdas

Mantotā un Composition API režīma jaukšana

Izmantojot useI18n() ar legacy: true (noklusējums), rodas kļūdas. Ja izmantojat Composition API, createI18n() iestatiet legacy: false vai ar Options API veidnēs konsekventi izmantojiet $t(). Nejauciet abus režīmus vienā lietotnē.

v-html izmantošana tulkotām virknēm

v-html izmantošana HTML saturošu tulkojumu renderēšanai rada XSS risku, ja kāda interpolācijas vērtība nāk no lietotāja ievades. Tulkojumiem ar iegultu HTML vai Vue komponentiem izmantojiet komponentu &lt;i18n-t&gt; — tas pēc noklusējuma ir drošs un atbalsta reaktīvu komponentu iegulšanu.

Reģionālie lietotāji vecāklokalizācijas vietā redz angļu valodu

vue-i18n fallbackLocale ir plakans saraksts, nevis katrai lokālei paredzēta ķēde. pt-BR atkāpjas uz sarakstā norādīto (parasti „en“), pilnībā izlaižot pt-PT. Izmantojiet vue-i18n-locale-chain, lai pievienotu pareizu reģionālo atkāpšanos ar dziļo sapludināšanu.

Izmēģiniet i18n Agent tūlīt

Nometiet tulkošanas failu šeit

JSON, YAML, PO, XML, CSV, Markdown, Properties

vai noklikšķiniet, lai izvēlētos

Mērķa valodas

Reģistrācija nav vajadzīgaTūlītēja tāme

Vue i18n bieži uzdotie jautājumi