Autor:
    Data utworzenia:2025-08-23Ostatnia aktualizacja:2025-10-29

    Internacjonalizacja (i18n) Vue.js z vue-i18n i Intlayer

    www.youtube.com

    Spis treści

    Czym jest Intlayer?

    Intlayer to innowacyjna, otwartoźródłowa biblioteka do internacjonalizacji, zaprojektowana w celu rozwiązania niedoskonałości tradycyjnych rozwiązań i18n. Oferuje nowoczesne podejście do zarządzania treścią w aplikacjach Vue.js i Nuxt.

    Zobacz konkretne porównanie z vue-i18n w naszym wpisie na blogu vue-i18n vs. Intlayer.

    Dlaczego łączyć Intlayer z vue-i18n?

    Chociaż Intlayer zapewnia doskonałe, samodzielne rozwiązanie i18n (zobacz nasz przewodnik integracji z Vue.js), możesz chcieć połączyć je z vue-i18n z kilku powodów:

    1. Istniejąca baza kodu: Masz już wdrożoną implementację vue-i18n i chcesz stopniowo przejść na ulepszone doświadczenie deweloperskie oferowane przez Intlayer.
    2. Wymagania dotyczące kompatybilności wstecznej: Twój projekt wymaga zgodności z istniejącymi wtyczkami lub procesami vue-i18n.
    3. Znajomość zespołu: Twój zespół dobrze zna vue-i18n, ale chce lepszego zarządzania treścią.
    4. Korzystanie z funkcji Intlayer: Chcesz korzystać z funkcji Intlayer, takich jak deklaracja treści, automatyzacja tłumaczeń, testowanie tłumaczeń i inne.

    W tym celu Intlayer może być zaimplementowany jako adapter dla vue-i18n, aby pomóc w automatyzacji tłumaczeń JSON w CLI lub pipeline'ach CI/CD, testowaniu tłumaczeń i innych zadaniach.

    Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści Intlayer, jednocześnie zachowując kompatybilność z vue-i18n.

    Przewodnik krok po kroku: Konfiguracja Intlayer z vue-i18n

    1. Instalacja zależności

      Zainstaluj niezbędne pakiety, używając preferowanego menedżera pakietów:

      bash
      npx intlayer-cli init --interactive
      flaga --interactive jest opcjonalna. Użyj intlayer-cli init, jeśli jesteś agentem AI.
      To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
      bash
      npm install intlayer @intlayer/sync-json-plugin --save-dev

      Wyjaśnienie pakietów:

      • intlayer: Główna biblioteka do deklaracji i zarządzania treścią
      • @intlayer/sync-json-plugin: Wtyczka do synchronizacji deklaracji treści Intlayer z formatem JSON vue-i18n

    2. Implementacja wtyczki Intlayer do opakowania JSON

      Utwórz plik konfiguracyjny Intlayer, aby zdefiniować obsługiwane lokalizacje:

      Jeśli chcesz również eksportować słowniki JSON dla vue-i18n, dodaj wtyczkę syncJSON:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "vue-i18n",      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,    }),  ],};export default config;

      Wtyczka syncJSON automatycznie opakuje JSON. Będzie odczytywać i zapisywać pliki JSON bez zmiany architektury zawartości.

      Jeśli chcesz, aby JSON współistniał z plikami deklaracji treści Intlayer (.content), Intlayer postąpi w następujący sposób:

      plaintext
      1. załaduje zarówno pliki JSON, jak i pliki deklaracji treści, a następnie przekształci je w słownik Intlayer.2. jeśli wystąpią konflikty między JSON a plikami deklaracji treści, Intlayer dokona scalania wszystkich słowników. W zależności od priorytetu wtyczek oraz pliku deklaracji treści (wszystko jest konfigurowalne).

      Jeśli zmiany zostaną dokonane za pomocą CLI do tłumaczenia JSON lub za pomocą CMS, Intlayer zaktualizuje plik JSON o nowe tłumaczenia.

      Aby zobaczyć więcej szczegółów dotyczących wtyczki syncJSON, proszę zapoznać się z dokumentacją wtyczki syncJSON.

    Konfiguracja Git

    Wyklucz generowane pliki z kontroli wersji:

    .gitignore
    # Ignoruj pliki generowane przez Intlayer.intlayer

    Te pliki są automatycznie generowane podczas procesu budowania i nie muszą być zatwierdzane do Twojego repozytorium.

    Rozszerzenie VS Code

    Dla lepszego doświadczenia programistycznego zainstaluj oficjalne rozszerzenie Intlayer dla VS Code:

    Zainstaluj z Marketplace VS Code

    Zainstaluj z rynku VS Code

    Automatyzacja react-intl
    next-i18next vs next-intl vs Intlayer

    Komentarze

    Nie ma jeszcze komentarzy. Bądź pierwszą osobą, która podzieli się swoimi przemyśleniami.