Konfiguracja vue-i18n i pliki komunikatów
createI18n(), lokalizacyjne pliki JSON, składnia komunikatów {name}, zagnieżdżone klucze oraz lokalizacja zapasowa.
Konfiguracja vue-i18n i pliki komunikatów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Czym jest i18n?
Internacjonalizacja (i18n) polega na budowaniu aplikacji tak, aby mogła wyświetlać tekst w wielu językach. Vue I18n to oficjalna biblioteka do tłumaczenia aplikacji Vue.
Zamiast wpisywać angielskie napisy na stałe, wyszukuje się klucze, które wskazują tekst w aktywnym języku.
Instalowanie Vue I18n
Dodaj pakiet. W Vue 3 używa się wersji 9 lub nowszej, opartej na Composition API.
// terminal
// npm install vue-i18nPliki komunikatów
Tłumaczenia znajdują się w obiektach komunikatów, po jednym dla każdej lokalizacji. Klucze wskazują przetłumaczone ciągi znaków. Zacznij od języka angielskiego.
const en = {
greeting: "Hello",
nav: {
home: "Home",
about: "About",
},
}Dodawanie lokalizacji tureckiej
Każda lokalizacja odwzorowuje tę samą strukturę kluczy, aby każdy klucz istniał w każdym języku.
const tr = {
greeting: "Merhaba",
nav: {
home: "Ana Sayfa",
about: "Hakkinda",
},
}Tworzenie instancji i18n
createI18n tworzy instancję. Ustaw locale (aktywny język), fallbackLocale (używany, gdy brakuje klucza) oraz mapę messages.
import { createI18n } from "vue-i18n"
const i18n = createI18n({
legacy: false,
locale: "en",
fallbackLocale: "en",
messages: { en, tr },
})Dlaczego legacy: false
Ustawienie legacy: false włącza tryb Composition API, używany przez nowoczesne aplikacje Vue 3. Udostępnia ono composable useI18n, który poznasz na następnej lekcji.
const i18n = createI18n({
legacy: false, // Composition API mode
locale: "en",
messages: { en, tr },
})Rejestrowanie w aplikacji
Zainstaluj instancję jako plugin za pomocą app.use(i18n). Dzięki temu pomocniki tłumaczeniowe będą dostępne w całym drzewie komponentów.
import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
app.use(i18n)
app.mount("#app")Używanie $t w szablonach
Po zainstalowaniu instancji każdy szablon może wywołać $t(key), aby wyszukać tłumaczenie w aktywnej lokalizacji.
<template>
<h1>{{ $t("greeting") }}</h1>
<a>{{ $t("nav.home") }}</a>
</template>Jak działa fallbackLocale
Jeśli w aktywnej lokalizacji brakuje klucza, Vue I18n używa fallbackLocale zamiast wyświetlać surowy klucz. Dzięki temu interfejs pozostaje zrozumiały podczas pracy nad tłumaczeniami.
// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English textInterpolacja z symbolami zastępczymi
Komunikaty mogą zawierać nazwane symbole zastępcze w nawiasach klamrowych. Przekaż wartości jako drugi argument, aby je wstawić.
const en = {
welcome: "Welcome, {name}!",
}
// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"Organizowanie plików komunikatów
W rzeczywistych aplikacjach umieść każdą lokalizację w osobnym pliku (en.json, tr.json) i zaimportuj je. Ułatwia to zarządzanie tłumaczeniami i pozwala tłumaczom pracować niezależnie.
// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"
createI18n({ locale: "en", messages: { en, tr } })Szybkie sprawdzenie
Sprawdź swoje rozumienie konfiguracji Vue I18n.
Podsumowanie
Skonfigurowałeś Vue I18n:
- i18n oznacza wyświetlanie tekstu w wielu językach przez wyszukiwanie kluczy.
- Zdefiniuj osobny obiekt komunikatów dla każdej lokalizacji, używając tej samej struktury kluczy.
createI18nprzyjmujelocale,fallbackLocaleimessages; użyjlegacy: falsew trybie Composition API.- Zainstaluj instancję za pomocą
app.use(i18n), a w szablonach tłumacz tekst za pomocą$t(key). - Symbole zastępcze, takie jak
{name}, są wypełniane za pomocą drugiego argumentu.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Konfiguracja vue-i18n i pliki komunikatów” jest bezpłatna?
Tak — pełny tekst „Konfiguracja vue-i18n i pliki komunikatów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Konfiguracja vue-i18n i pliki komunikatów”?
createI18n(), lokalizacyjne pliki JSON, składnia komunikatów {name}, zagnieżdżone klucze oraz lokalizacja zapasowa. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Konfiguracja vue-i18n i pliki komunikatów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja vue-i18n i pliki komunikatów
- Composable useI18n i funkcja t()
- Liczba mnoga i komunikaty powiązane
- Formatowanie liczb, dat i walut