Migracja z vue-i18n do Intlayer

Dlaczego migrować z vue-i18n do Intlayer?

Strategie migracji

Istnieją dwie komplementarne strategie migracji z vue-i18n do Intlayer:

1. Adapter compat (rekomendowany dla istniejących aplikacji) — Zainstaluj @intlayer/vue-i18n (dla komponentów Vue). Ten pakiet ujawnia dokładnie ten sam API co vue-i18n, ale deleguje całą pracę tłumaczenia do Intlayer za kulisami. Zachowujesz istniejące $t, useI18n() i <i18n-t> — jedyną zmianą jest ścieżka importu i inicjalizacja.

2. Pełna migracja — Stopniowo zastępuj API vue-i18n natywnymi hakami Intlayer (useIntlayer) i umieszczaj zawartość w plikach .content.ts obok komponentów.

Ten przewodnik obejmuje Strategię 1 najpierw (adapter compat drop-in), a następnie przechodzi przez opcjonalną pełną migrację.

Spis treści

Szybka migracja

Następujące kroki są minimalne wymagane aby uruchomić istniejącą aplikację vue-i18n na Intlayer bez zmian kodu w komponentach.

Zainstaluj pakiety rdzenia Intlayer i adapter compat:

Pełna migracja

Poniższe kroki są opcjonalne i mogą być wykonywane stopniowo. Odblokowują pełny zestaw funkcji Intlayer: edytor wizualny, CMS, pliki zawartości z typami, tłumaczenie wspierane przez AI i wiele więcej.

1. 4

   Jawne zmianę nazwy importu (opcjonalnie)

   Opcjonalne

   Wtyczki Intlayer już obsługują aliasing na poziomie bundlera. Jeśli wolisz uczynić zależność jawną w plikach źródłowych, możesz zmienić nazwy importów ręcznie:

   Pokaż całą zawartość tabeli

   Pokaż całą zawartość tabeli

   Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość

   Przed	Po
   import { useI18n } from 'vue-i18n'	import { useI18n } from '@intlayer/vue-i18n'
   import { createI18n } from 'vue-i18n'	import { createI18n } from '@intlayer/vue-i18n'

   Są to zamiany plug-and-play — nie są wymagane żadne zmiany w sygnaturach funkcji, argumentach ani typach zwracanych.

2. 5

   Włącz automatyczne tłumaczenie wspierane przez AI

   Opcjonalne

   Po połączeniu Intlayer, użyj jego CLI, aby automatycznie uzupełnić brakujące tłumaczenia:

   bash

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   # Test for missing translations (add to CI)npx intlayer test# Fill missing translations with AInpx intlayer fill

   Dodaj konfigurację AI do intlayer.config.ts:

   intlayer.config.ts

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   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: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // domyślnie
       // model: "gpt-4o-mini",   // domyślnie
     },
   };
   
   export default config;

   Aby uzyskać wszystkie dostępne opcje, zapoznaj się z dokumentacją CLI Intlayer.

Co możesz usunąć po migracji

Gdy adaptery kompatybilności będą na miejscu, możesz usunąć następujący boilerplate vue-i18n:

Gdy będziesz gotowy pójść dalej, Intlayer automatycznie odkrywa wszystkie pliki .content.ts i .content.json gdziekolwiek w twoim codebase (domyślnie gdziekolwiek wewnątrz ./src). Możesz umieścić plik my-component.content.ts bezpośrednio obok twojego MyComponent.vue, a Intlayer podejmie go w czasie budowania bez dodatkowej konfiguracji — bez importów, bez rejestracji, bez scentralizowanego pliku indeksu. To sprawia, że co-lokowanie tłumaczeń ze stronami i komponentami jest całkowicie bezproblemowe.

Konfiguruj TypeScript

Intlayer używa module augmentation, aby zapewnić pełną intellisense TypeScript dla twoich kluczy tłumaczeń. Upewnij się, że twój tsconfig.json zawiera auto-generowane typy:

{  // ... Twoje istniejące konfiguracje TypeScript  "include": [    // ... Twoje istniejące konfiguracje TypeScript    ".intlayer/**/*.ts", // Uwzględnij auto-generowane typy  ],}

Konfiguracja Git

Dodaj wygenerowany przez Intlayer katalog do .gitignore:

# Ignoruj pliki wygenerowane przez Intlayer.intlayer

Przejdź dalej

• Visual Editor — Zarządzaj tłumaczeniami wizualnie w przeglądarce: Intlayer Visual Editor
• CMS — Externalizuj i zarządzaj zawartością zdalnie: Intlayer CMS
• VS Code Extension — Uzyskaj autouzupełnianie i wykrywanie błędów tłumaczeń w czasie rzeczywistym: Intlayer VS Code Extension
• CLI Reference — Pełna lista poleceń CLI: Intlayer CLI
• Intlayer with Vue — Pełny przewodnik konfiguracji dla Vue: intlayerwithvite+vue.md
• Intlayer with Nuxt — Pełny przewodnik konfiguracji dla Nuxt: intlayerwithnuxt.md