Skip to main content

Vue i18n: Πλήρης ρύθμιση διεθνοποίησης με το vue-i18n

Από την εγκατάσταση έως την παραγωγή: ρυθμίστε το vue-i18n με το Composition API, χειριστείτε τον πληθυντικό με κανόνες CLDR, χρησιμοποιήστε παρεμβολή στοιχείων και προσθέστε έξυπνες αλυσίδες εναλλακτικών locale.

1

Εγκαταστήστε το vue-i18n

Το vue-i18n είναι το επίσημο πρόσθετο διεθνοποίησης για το Vue.js. Παρέχει αντιδραστικές μεταφράσεις, πληθυντικό τύπου ICU, παρεμβολή στοιχείων, μορφοποίηση ημερομηνιών, ωρών και αριθμών και υποστήριξη τόσο του Options API όσο και του Composition API.

Terminal
npm install vue-i18n@9
2

Ρυθμίστε το vue-i18n

Δημιουργήστε ένα στιγμιότυπο i18n με το createI18n() και καταχωρίστε το ως πρόσθετο Vue. Ορίστε τα μηνύματα locale, το προεπιλεγμένο locale και το εναλλακτικό locale. Το vue-i18n υποστηρίζει τόσο την παλαιότερη λειτουργία (Options API) όσο και τη λειτουργία σύνθεσης (Composition API).

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')
Αν βλέπετε σφάλματα 'Not available in legacy mode', αναμειγνύετε κλήσεις i18n του Composition API (useI18n()) με ρύθμιση παλαιότερης λειτουργίας. Ορίστε legacy: false στο createI18n() για να χρησιμοποιήσετε τη λειτουργία Composition API ή χρησιμοποιείτε με συνέπεια τη σύνταξη $t() του Options API.
3

Χρησιμοποιήστε μεταφράσεις στα πρότυπα

Το vue-i18n παρέχει τη συνάρτηση $t() στα πρότυπα (Options API) και τη συνάρτηση t() από το useI18n() (Composition API). Και οι δύο δέχονται το κλειδί μετάφρασης και προαιρετικές επώνυμες παραμέτρους ή παραμέτρους λίστας για παρεμβολή.

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

Χειριστείτε τον πληθυντικό αριθμό

Το vue-i18n υποστηρίζει τον πληθυντικό αριθμό μέσω μορφών χωρισμένων με κατακόρυφες γραμμές και της συνάρτησης $tc() (παλαιότερη λειτουργία) ή της t() με παράμετρο πλήθους (Composition API). Ορίστε τις μορφές πληθυντικού στα μηνύματα locale με το διαχωριστικό κατακόρυφης γραμμής: '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>
Η σύνταξη πληθυντικού με κατακόρυφες γραμμές υποστηρίζει μόνο τον πληθυντικό απόλυτων αριθμητικών (cardinal), με έως τρεις μορφές (zero | one | other). Για γλώσσες με σύνθετους κανόνες πληθυντικού CLDR (Αραβικά, Ρωσικά, Πολωνικά), χρησιμοποιήστε σύνταξη ICU MessageFormat ή τον τροποποιητή @.plural με ρητές αντιστοιχίσεις κατηγοριών CLDR.
5

Προσθέστε αλυσίδες εναλλακτικών locale

Το ενσωματωμένο fallbackLocale του vue-i18n υποστηρίζει μόνο μια επίπεδη λίστα εναλλακτικών locale και όχι ξεχωριστές αλυσίδες ανά locale. Ένας χρήστης του pt-BR, όταν λείπει ένα κλειδί, βλέπει Αγγλικά αντί για pt-PT. Το vue-i18n-locale-chain προσθέτει ρυθμιζόμενες αλυσίδες συγχώνευσης σε βάθος, ώστε οι χρήστες τοπικών παραλλαγών να βλέπουν πάντα την πλησιέστερη διαθέσιμη μετάφραση.

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 συγχωνεύει τα μηνύματα σε βάθος κατά τη φόρτωση. Το συγχωνευμένο σύνολο μηνυμάτων αποθηκεύεται στην κρυφή μνήμη από το σύστημα αντιδραστικότητας του vue-i18n, επομένως οι αναζητήσεις εναλλακτικών τιμών δεν επιβαρύνουν την απόδοση κατά την εκτέλεση.
6

Αυτοματοποιήστε τις μεταφράσεις

Αφού ρυθμίσετε το vue-i18n, μεταφράστε τα αρχεία locale JSON με τη χρήση AI. Από το IDE, ζητήστε από τον βοηθό AI να μεταφράσει το αρχείο προέλευσης ή ενσωματώστε τη μετάφραση στο pipeline CI/CD για πλήρως αυτοματοποιημένη τοπική προσαρμογή.

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

Ρύθμιση αλυσίδων εναλλακτικών locale

Ρυθμίστε ξεχωριστές αλυσίδες εναλλακτικών locale, ώστε οι χρήστες τοπικών παραλλαγών να βλέπουν την πλησιέστερη διαθέσιμη μετάφραση αντί να μεταβαίνουν απευθείας στα Αγγλικά. Το vue-i18n υποστηρίζει το fallbackLocale σε μορφή αντικειμένου για τον ορισμό αλυσίδων ανά locale.

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 σάς επιτρέπει να ορίζετε διαφορετικές αλυσίδες για διαφορετικά locale. Ένας χρήστης του pt-BR μεταβαίνει εναλλακτικά στο pt και μετά στο en, ενώ ένας χρήστης του zh-Hant-TW μεταβαίνει στο zh-Hant, στο zh και μετά στο en.

Συνήθεις παγίδες

Ανάμειξη των λειτουργιών Legacy και Composition API

Η χρήση του useI18n() με legacy: true (την προεπιλογή) προκαλεί σφάλματα. Ορίστε legacy: false στο createI18n() αν χρησιμοποιείτε Composition API ή παραμείνετε στο $t() των προτύπων με Options API. Μην αναμειγνύετε τις δύο λειτουργίες στην ίδια εφαρμογή.

Χρήση του v-html για μεταφρασμένες συμβολοσειρές

Η χρήση του v-html για την απόδοση μεταφράσεων που περιέχουν HTML ενέχει κίνδυνο XSS, αν οποιεσδήποτε τιμές παρεμβολής προέρχονται από δεδομένα χρήστη. Χρησιμοποιήστε το στοιχείο &lt;i18n-t&gt; για μεταφράσεις με ενσωματωμένο HTML ή στοιχεία Vue — είναι ασφαλές από προεπιλογή και υποστηρίζει αντιδραστική ενσωμάτωση στοιχείων.

Οι χρήστες τοπικών παραλλαγών βλέπουν Αγγλικά αντί για το γονικό locale

Το fallbackLocale του vue-i18n είναι επίπεδη λίστα και όχι αλυσίδα ανά locale. Το pt-BR μεταβαίνει σε ό,τι περιέχει η λίστα (συνήθως 'en'), παραλείποντας εντελώς το pt-PT. Χρησιμοποιήστε το vue-i18n-locale-chain για να προσθέσετε σωστή περιφερειακή εναλλακτική αλυσίδα με συγχώνευση σε βάθος.

Δοκιμάστε τώρα το i18n Agent

Αφήστε εδώ το αρχείο μετάφρασής σας

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

ή κάντε κλικ για να επιλέξετε αρχείο

Γλώσσες-στόχοι

Δεν απαιτείται εγγραφήΆμεση εκτίμηση

Συχνές ερωτήσεις για το Vue i18n