Skip to main content

Vue i18n: išsamus internacionalizavimo konfigūravimas naudojant vue-i18n

Nuo diegimo iki gamybinės aplinkos: sukonfigūruokite vue-i18n naudodami Composition API, tvarkykite daugiskaitą pagal CLDR taisykles, naudokite komponentų interpoliavimą ir pridėkite išmanias lokalių atsarginio parinkimo grandines.

1

Įdiekite vue-i18n

vue-i18n yra oficialus Vue.js internacionalizavimo papildinys. Jis suteikia reaktyvius vertimus, ICU stiliaus daugiskaitą, komponentų interpoliavimą, datos, laiko ir skaičių formatavimą bei palaiko Options API ir Composition API.

Terminal
npm install vue-i18n@9
2

Sukonfigūruokite vue-i18n

Sukurkite i18n egzempliorių naudodami createI18n() ir užregistruokite jį kaip Vue papildinį. Apibrėžkite lokalės pranešimus, nustatykite numatytąją ir atsarginę lokales. vue-i18n palaiko ir senąjį (Options API), ir kompozicijos (Composition API) režimus.

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')
Jei matote klaidas „Not available in legacy mode“, maišote Composition API i18n iškvietimus (useI18n()) su senojo režimo konfigūracija. Norėdami naudoti Composition API režimą, createI18n() funkcijoje nustatykite legacy: false, arba nuosekliai naudokite Options API $t() sintaksę.
3

Naudokite vertimus šablonuose

vue-i18n pateikia funkciją $t() šablonuose (Options API) ir funkciją t() iš useI18n() (Composition API). Abi variantai priima vertimo raktą ir pasirinktinius vardinius arba sąrašo parametrus interpoliavimui.

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

Tvarkykite daugiskaitą

vue-i18n palaiko daugiskaitą naudodama vertikaliuoju brūkšniu atskirtas formas ir funkciją $tc() (senajame režime) arba t() su skaičiaus parametru (Composition API). Lokalės pranešimuose apibrėžkite daugiskaitos formas su vertikaliuoju brūkšniu: '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>
Vertikaliuoju brūkšniu atskirta daugiskaitos sintaksė palaiko tik kiekinę daugiskaitą su ne daugiau kaip trimis formomis (zero | one | other). Kalboms su sudėtingomis CLDR daugiskaitos taisyklėmis (arabų, rusų, lenkų) naudokite ICU MessageFormat sintaksę arba @.plural modifikatorių su aiškia CLDR kategorijų atitiktimi.
5

Pridėti atsarginių lokalių grandines

Integruota vue-i18n fallbackLocale palaiko tik plokščią atsarginių lokalių sąrašą, o ne kiekvienai lokalei skirtas grandines. Jei pt-BR naudotojui trūksta rakto, pasirenkama anglų, o ne pt-PT kalba. vue-i18n-locale-chain prideda konfigūruojamas giliojo suliejimo grandines, kad regionų naudotojai visada matytų artimiausią galimą vertimą.

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 giliai sulieja pranešimus įkėlimo metu. Sulietą pranešimų rinkinį podėlyje laiko vue-i18n reaktyvumo sistema, todėl atsarginės paieškos nesukelia našumo nuostolių vykdymo metu.
6

Automatizuoti vertimus

Sukonfigūravę vue-i18n, išverskite lokalės JSON failus naudodami DI. IDE aplinkoje paprašykite DI asistento išversti šaltinio failą arba integruokite vertimą į CI/CD konvejerį, kad lokalizavimas būtų visiškai automatizuotas.

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

Lokalės atsarginio parinkimo grandinės konfigūracija

Sukonfigūruokite kiekvienai lokalei skirtas atsarginio parinkimo grandines, kad regionų naudotojai matytų artimiausią galimą vertimą, o ne iškart pereitų prie anglų kalbos. vue-i18n palaiko objekto tipo fallbackLocale, skirtą kiekvienos lokalės grandinėms apibrėžti.

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 objektas leidžia skirtingoms lokalėms apibrėžti skirtingas grandines. pt-BR naudotojui atsarginės lokalės yra pt, tada en, o zh-Hant-TW naudotojui – zh-Hant, zh, tada en.

Dažnos klaidos

Senojo ir Composition API režimų maišymas

Naudojant useI18n() su legacy: true (numatytoji reikšmė), kyla klaidų. Jei naudojate Composition API, createI18n() nustatykite legacy: false, arba su Options API šablonuose nuosekliai naudokite $t(). Nemaišykite abiejų režimų toje pačioje programoje.

v-html naudojimas išverstoms eilutėms

Naudoti v-html vertimams su HTML atvaizduoti yra XSS rizika, jei interpoliavimo reikšmės gaunamos iš naudotojo įvesties. Vertimams su įterptu HTML arba Vue komponentais naudokite komponentą &lt;i18n-t&gt; – pagal numatytąją nuostatą jis yra saugus ir palaiko reaktyvų komponentų įterpimą.

Regionų naudotojai vietoje pirminės lokalės mato anglų kalbą

vue-i18n fallbackLocale yra plokščias sąrašas, o ne kiekvienai lokalei skirta grandinė. pt-BR pereina prie to, kas yra sąraše (paprastai „en“), visiškai praleisdama pt-PT. Naudokite vue-i18n-locale-chain, kad pridėtumėte tinkamą regioninį atsarginį parinkimą su giliuoju suliejimu.

Išbandykite i18n Agent dabar

Nuvilkite vertimo failą čia

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

arba spustelėkite norėdami pasirinkti

Tikslinės kalbos

Registruotis nereikiaMomentinis įvertis

Vue i18n DUK