Vue.js & Nuxt Lokalisierung
Organisieren Sie vue-i18n-Locale-Dateien für große Projekte nach Funktionsmodul. Anstatt einer locales/en.json, die alle Zeichenketten enthält, teilen Sie diese in separate Dateien für gemeinsame UI, Authentifizierung und Dashboard-Inhalte auf und konfigurieren Sie das nuxtjs/i18n-Modul zum Lazy-Laden jedes Moduls. Lazy Loading bedeutet, dass der Browser eines französischen Nutzers nur die französischen Dashboard-Zeichenketten lädt, wenn er zu diesem Bereich navigiert, was die anfängliche Seitenlast erheblich reduziert. Dies erleichtert auch die Zuweisung von Übersetzungsarbeit nach Produktbereich.
Benennen Sie Übersetzungsschlüssel nach Komponente und Absicht: header.nav.pricing ist wartbarer als pricing_nav_link und übersteht eine Umstrukturierung, ohne Übersetzungen zu unterbrechen. Vermeiden Sie Schlüssel mit positioneller oder numerischer Bedeutung – sie brechen, sobald sich Reihenfolge oder Inhalt ändern. Verwenden Sie für Zeichenketten, die Links oder formatierte Spans einbetten, die Komponenteninterpolation von vue-i18n im Template mit benannter Slot-Syntax, anstatt den Satz zu teilen oder HTML direkt in Übersetzungswerte einzubetten.
Konfigurieren Sie in Nuxt 3 das nuxtjs/i18n-Modul in nuxt.config.ts. Verwenden Sie die prefix_except_default-Strategie, sodass Ihre Standardsprache saubere URLs hat und andere Sprachen ein Sprachpräfix erhalten. Setzen Sie detectBrowserLanguage mit einer Cookie-Strategie, um die Sprachauswahl des Nutzers sitzungsübergreifend zu speichern. Verwenden Sie defineI18nRoute innerhalb von Seiten, um bestimmte Sprachvarianten auf Routen einzuschränken, für die noch keine Übersetzungen vorliegen, und aktivieren Sie lazy: true, um Lazy-Loaded-Locale-Dateien zu aktivieren.
Verbinden Sie Ihr GitHub-, Bitbucket- oder Azure-Repos-Repository mit Language Monster. Language Monster erkennt Locale-Dateien im konfigurierten Verzeichnis automatisch. Geänderte Zeichenketten in Ihrer Quellsprachvariante werden abgerufen, mit angewendetem Glossar und Translation Memory übersetzt und als Pull Request in einen Branch zurückgespielt. Die Sprachhierarchie ermöglicht es Ihnen, britisches Englisch als übergeordnete Sprachvariante und australisches Englisch als untergeordnete Variante zu definieren – die untergeordnete Variante übernimmt alle übergeordneten Zeichenketten und überschreibt nur, wo sich Inhalte tatsächlich unterscheiden.
Aktivieren Sie den typesicheren Modus von vue-i18n, indem Sie TypeScript-Typdefinitionen aus Ihrer Quell-Locale-Datei generieren – dies ermöglicht typgeprüfte Übersetzungsschlüssel-Verwendung in Ihrer gesamten Codebasis und zeigt fehlende Schlüssel zur Kompilierungszeit an. Die Platzhalterintegrätsprüfungen von Language Monster verifizieren, dass benannte Parameter, die in Quellzeichenketten vorhanden sind, in jeder übersetzten Zeichenkette erscheinen, bevor Dateien in Ihr Repository zurückgeschrieben werden.