Skip to main content

Vue i18n: täielik internatsionaliseerimise seadistus vue-i18n-iga

Paigaldamisest tootmiskeskkonnani: seadista vue-i18n Composition API-ga, töötle mitmusevorme CLDR-i reeglitega, kasuta komponentide interpoleerimist ja lisa nutikad varulokaadiahelad.

1

Paigalda vue-i18n

vue-i18n on Vue.js-i ametlik internatsionaliseerimisplugin. See pakub reaktiivseid tõlkeid, ICU-laadset mitmusekäsitlust, komponentide interpoleerimist, kuupäevade ja arvude vormindamist ning nii Options API kui ka Composition API tuge.

Terminal
npm install vue-i18n@9
2

Seadista vue-i18n

Loo i18n-i eksemplar funktsiooniga createI18n() ja registreeri see Vue pluginana. Määra lokaadisõnumid, vaikelokaat ja varulokaat. vue-i18n toetab nii legacy (Options API) kui ka composition (Composition API) režiimi.

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')
Kui näed tõrkeid 'Not available in legacy mode', segad Composition API i18n-kutseid (useI18n()) legacy-režiimi seadistusega. Composition API režiimi kasutamiseks määra createI18n() funktsioonis legacy: false või kasuta järjepidevalt Options API $t() süntaksit.
3

Kasuta tõlkeid mallides

vue-i18n pakub mallides funktsiooni $t() (Options API) ja funktsioonist useI18n() saadavat t() funktsiooni (Composition API). Mõlemad võtavad interpoleerimiseks vastu tõlkevõtme ning valikulised nimega või loendiparameetrid.

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

Töötle mitmusevorme

vue-i18n toetab mitmusevorme püstkriipsuga eraldatud vormide ja $tc() funktsiooni (legacy) või count-parameetriga t() funktsiooni (Composition API) kaudu. Määra mitmusevormid lokaadisõnumites püstkriipsueraldajaga: '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>
Püstkriipsuga eraldatud mitmusesüntaks toetab ainult kardinaalseid mitmusi ja kuni kolme vormi (zero | one | other). Keerukate CLDR-i mitmusereeglitega keelte (araabia, vene, poola) puhul kasuta ICU MessageFormat'i süntaksit või @.plural modifikaatorit selgesõnaliste CLDR-i kategooriavastendustega.
5

Lisa varulokaadiahelad

vue-i18n-i sisseehitatud fallbackLocale toetab ainult lamedat varulokaatide loendit, mitte lokaadipõhiseid ahelaid. Puuduva võtmega pt-BR kasutaja taandub pt-PT asemel inglise keelele. vue-i18n-locale-chain lisab seadistatavad süvaühendatud ahelad, et piirkondlikud kasutajad näeksid alati lähimat saadaolevat tõlget.

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 süvaühendab sõnumid laadimise ajal. vue-i18n-i reaktiivsussüsteem puhverdab ühendatud sõnumikomplekti, seega pole varulokaadi otsingutel käitusaegset jõudluskulu.
6

Automatiseeri tõlked

Kui vue-i18n on seadistatud, tõlgi lokaatide JSON-failid tehisintellektiga. Palu IDE-s oma tehisintellekti abilisel lähtefail tõlkida või lõimi tõlkimine täielikult automatiseeritud lokaliseerimiseks CI/CD-konveierisse.

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

Varulokaadiahela seadistus

Seadista lokaadipõhised varulokaadiahelad, et piirkondlikud kasutajad näeksid lähimat saadaolevat tõlget ega liiguks otse inglise keelele. vue-i18n toetab lokaadipõhiste ahelate määratlemiseks objektikujulist fallbackLocale'i.

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'i objekt võimaldab määrata eri lokaatidele eri ahelad. pt-BR kasutaja taandub pt-le ja seejärel en-ile, zh-Hant-TW kasutaja aga zh-Hantile, zh-le ning siis en-ile.

Levinud komistuskivid

Legacy ja Composition API režiimide segamine

useI18n() kasutamine vaikevalikuga legacy: true põhjustab tõrkeid. Kui kasutad Composition API-t, määra createI18n() funktsioonis legacy: false. Muul juhul jää Options API-ga mallides $t() juurde. Ära sega mõlemat režiimi samas rakenduses.

v-html-i kasutamine tõlgitud stringide jaoks

HTML-i sisaldavate tõlgete renderdamine v-html-iga on XSS-i risk, kui interpoleerimisväärtused pärinevad kasutaja sisendist. Manustatud HTML-i või Vue komponente sisaldavate tõlgete jaoks kasuta komponenti &lt;i18n-t&gt; — see on vaikimisi ohutu ja toetab komponentide reaktiivset manustamist.

Piirkondlikud kasutajad näevad põhilokaadi asemel inglise keelt

vue-i18n-i fallbackLocale on lame loend, mitte lokaadipõhine ahel. pt-BR taandub loendis olevale lokaadile, tavaliselt en-ile, jättes pt-PT täielikult vahele. Õige piirkondliku varu lisamiseks kasuta süvaühendamisega vue-i18n-locale-chaini.

Proovi i18n Agent'i kohe

Kukuta tõlkefail siia

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

või klõpsa faili valimiseks

Sihtkeeled

Registreerumine pole vajalikKohene hinnang

Vue i18n-i KKK