Nuxts ultimative Internationalisierungslösung: I18n+Nuxt Content
Da Vue und Nuxt, die in China weit verbreitet sind, zunehmend ins Ausland gehen, stehen sie häufig vor Internationalisierungsproblemen.
Wenn es sich um WordPress handelt, ist es ganz einfach: Installieren Sie ein Plug-in, konfigurieren Sie die Übersetzungsschnittstelle von Google und dann übersetzt das System jeden Tag automatisch neue Inhalte in verschiedene Sprachversionen.
Aber für andere Systeme ist es nicht so praktisch.
Der Code ist Open Source: https://github.com/aigc-projects/nuxt-i18n-starter
1. Grundlegende Internationalisierung-I18n
nuxt-i18n
1. Was ist I18n?
I18n ist ein Muss für die Nuxt-Internationalisierung. Es bietet hauptsächlich einen vollständigen Satz von Internationalisierungslösungen, einschließlich Internationalisierungsrouting und Methoden zum Ändern von Sprachen basierend auf Internationalisierungsrouting.
2. Installieren Sie I18n
Alles Folgende ist in Ordnung.
Garn add @nuxtjs/i18n # Garn npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm add @nuxtjs/i18n@next --save-dev3. Konfigurieren Sie nuxt.config.ts
module: [ '@nuxtjs/i18n', ], i18n: { locales: [ { name: "English",code: "en", iso: "en-US", dir: "ltr" }, { name: " español",code: "es", iso: "es-LA", dir: "ltr" }, { name: "En français",code: "fr", iso: "fr-FR", dir: "ltr " }, { name: "العربية", code: "ar", iso: "ar-EG", dir: "rtl" },], defaultLocale: "en", discoverBrowserLanguage: false, // 👇 Referenzieren Sie den Vue I18n Konfigurationsdatei vueI18n: „./i18n.config.js“, }, 4. Konfigurieren Sie i18n.config.ts
Erstellen Sie eine neue i18n.config.ts oder i18n.config.js
Diese Datei wird zum Konfigurieren von Übersetzungsfeldern verwendet.
export default defineI18nConfig(() => ({ Legacy: false, // 👇 Übersetzungen hinzufügen message: { "en": { nav_about: "About", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "About", }, "fr": { nav_about: "About", }, }, }))
5. Komponenten verknüpfen
Code
Verwendung
{{ $t('nav_home') }}
6. Sprachumschaltkomponente
Code
<!-- components/LangSwitcher.vue -->
<script setup lang="ts">
// Used for type casting
// Used for type casting
import type { LocaleObject } from "@nuxtjs/i18n/dist/runtime/composables";
// Get active locale and supported locales
const { locale, locales } = useI18n()
// Cast to avoid TypeScript errors in template
const supportedLocales = locales.value as Array<LocaleObject>
const router = useRouter()
const switchLocalePath = useSwitchLocalePath()
// When the visitor selects a new locale, route to
// to the new locale's path e.g. /en-CA/foo → /ar-EG/foo
function onLocaleChanged(event: Event) {
const target = event.target as HTMLInputElement
// switchLocalePath('ar-EG') will return Arabic equivalent
// for the *current* URL path e.g. if we're at /en-CA/about,
// switchLocalePath('ar-EG') will return '/ar-EG/about'
router.push({ path: switchLocalePath(target.value) })
}
</script>
<template>
<div>
🌐
<select :value="locale" @change="onLocaleChanged">
<option v-for="loc in supportedLocales" :key="loc.code" :value="loc.code">
{{ loc.name }}
</option>
</select>
</div>
</template>
Verwendung
Verwenden Sie Tags auf einer Seite oder einem Layout:
7. Holen Sie sich die aktuelle Sprache
context.app.i18n.locale // wo Sie Zugriff auf NuxtContext haben this.$i18n.locale //in Komponente $i18n.locale // in Vorlage2. Internationalisierung des Dokumentinhalts
Allein durch die Verwendung von I18n kann die Internationalisierung der gesamten Website vollständig erreicht werden. Wenn die Website jedoch viele Artikel enthält, müssen viele Konfigurationselemente in i18n.config.ts geschrieben werden, was ziemlich mühsam ist.
Wenn der Artikelinhalt aus der Back-End-Datenbank stammt, muss dies natürlich nicht berücksichtigt werden. Sie müssen lediglich den übersetzten Inhalt in der Datenbank speichern und die Artikelversion in der entsprechenden Sprache für verschiedene Sprachseiten abrufen.
Hier wird gesagt, dass der Inhalt des Artikels nicht in der Back-End-Datenbank, sondern im Front-End liegt.
Für Nuxt ist es am besten, Nuxt-Inhalte zu verwenden. Einfach ausgedrückt werden alle Artikel in Markdown-Dateien gespeichert. Wenn dann eine bestimmte Route geöffnet wird, werden die Seite und die Markdown-Datei geladen, die dieser Route entsprechen.
Denn die gleiche Seite, etwa die Homepage, nutzt unterschiedliche Routen in unterschiedlichen Sprachen.
Die Standardeinstellung ist beispielsweise Englisch. Die Homepage ist www.xxx.com und die spanische Version ist www.xxx.com/es.
Daher ruft www.xxx.com index.vue im Seitenverzeichnis auf und lädt index.md im Inhaltsverzeichnis. Allerdings ruft www.xxx.com/es index.vue im Seitenverzeichnis auf und lädt das es.md-Dokument in das Inhaltsverzeichnis.
Daher müssen Sie für verschiedene Sprachversionen desselben Artikels nur die entsprechende Version der Übersetzungsdatei entsprechend der Route im Inhaltsverzeichnis erstellen.
1. Nuxt-Inhalte installieren
pnpm @nuxt/content hinzufügen
2. nuxt.config.ts-Konfiguration
Module: [ '@nuxt/content' ], Inhalt: { // ... Optionen }3. Rufen Sie auf der Seite das entsprechende Übersetzungsdokument auf
Die Startseite ist standardmäßig auf Englisch eingestellt und spanische Routen und Seiten sind konfiguriert.
Die endgültige Route sieht so aus:
Standard-Homepage (Englisch): www.xxx.com
Spanische Homepage: www.xxx.com/es
Entwerfen Sie zunächst das Inhaltsdateiverzeichnis
//Inhaltsverzeichnisdesign | Seiten .index.vue Inhalt .index.md .es.md
Fügen Sie dann Tags zu dem Teil der Homepage hinzu, in dem der Artikel aufgerufen werden soll
<ContentDoc />3. Best Practices für internationales Routing
en-US, en bedeutet Englisch, US bedeutet Land: Vereinigte Staaten. Dies ist ein Standard-Sprachcode. Die Route kann direkt so geschrieben werden: www.xxx.com/en-US
Meistens müssen wir es jedoch nicht auf die Länderebene herunterbrechen, es reicht nur das Sprachniveau. Daher ist es am besten, es so zu schreiben: www.xxx.com/en
Dies kann natürlich nicht auf Chinesisch zutreffen. Chinesisch umfasst: zh-CN (vereinfachtes Chinesisch), zh-HK (traditionelles Hongkong), zh-TW (traditionelles Taiwan)
Für Chinesen ist dies also der einzige Weg: www.xxx.com/zh-cn
4. Anhang: Internationale Standardsprachencodes
| Sprachcode | Sprachland |
|---|---|
| af | Afrikaans |
| af-ZA | Afrikaans |
| ar | Arabisch |
| ar-AE | Arabisch (VAE) |
| ar-BH | Arabisch (Bahrain) |
| ar-DZ | Arabisch (Algerien) |
| ar-EG | Arabisch (Ägypten) |
| ar-IQ | Arabisch (Irak) |
| ar-JO | Arabisch (Jordanien) |
| ar-KW | Arabisch (Kuwait) |
| ar-LB | Arabisch (Libanon) |
| ar-LY | Arabisch (Libyen) |
| ar-MA | Arabisch (Marokko) |
| ar-OM | Arabisch (Oman) |
| ar-QA | Arabisch (Katar) |
| ar-SA | Arabisch (Saudi-Arabien) |
| ar-SY | Arabisch (Syrien) |
| ar-TN | Arabisch (Tunesien) |
| ar-YE | Arabisch (Jemen) |
| az | Aserbaidschanisch |
| az-AZ | Aserbaidschanisch (Latein) |
| az-AZ | Aserbaidschanisch (Kyrillisch) |
| Sei | Belgier |
| be-BY | Belgier |
| bg | bulgarisch |
| bg-BG | bulgarisch |
| bs-BA | Bosnisch (Latein, Bosnien und Herzegowina) |
| ca | katalanisch |
| ca-ES | katalanisch |
| cs | Tschechisch |
| cs-CZ | Tschechisch |
| cy | Walisisch |
| cy-GB | Walisisch |
| da | dänisch |
| da-Weiß nicht | dänisch |
| de | Deutsch |
| de-AT | Deutsch (Österreich) |
| de-CH | Deutsch (Schweiz) |
| de-DE | Deutsches Deutschland) |
| Delikatessen | Deutsch (Liechtenstein) |
| de-LU | Deutsch (Luxemburg) |
| dv | Tiwiese |
| dv-MV | Tiwiese |
| el | griechisch |
| el-GR | griechisch |
| de | Englisch |
| en-AU | Englisch (Australien) |
| de-BZ | Englisch (Belize) |
| en-CA | Englisch (Kanada) |
| en-CB | Englisch (Karibik) |
| en-GB | Englisch UK) |
| en-IE | Englisch (Irland) |
| de-JM | Englisch (Jamaikanisch) |
| en-NZ | Englisch (Neuseeland) |
| en-PH | Englisch (Philippinen) |
| de-TT | Englisch (Trinidad) |
| en-US | Englisch (USA) |
| de-ZA | Englisch (Südafrika) |
| de-ZW | Englisch (Simbabwe) |
| eo | Esperanto |
| es | Spanisch |
| es-AR | Spanisch (Argentinien) |
| es-BO | Spanisch (Bolivien) |
| es-CL | Spanisch (Chile) |
| es-CO | Spanisch (Kolumbien) |
| es-CR | Spanisch (Costa Rica) |
| es-DO | Spanisch (Dominikanische Republik) |
| es-EC | Spanisch (Ecuador) |
| es-ES | Spanisch (traditionell) |
| es-ES | Spanisch (International) |
| es-GT | Spanisch (Guatemala) |
| es-HN | Spanisch (Honduras) |
| es-MX | Spanisch (Mexiko) |
| es-NI | Spanisch (Nicaragua) |
| es-PA | Spanisch (Panama) |
| es-PE | Spanisch (Peru) |
| es-PR | Spanisch (Puerto Rico (USA)) |
| erspähen | Spanisch (Paraguay) |
| es-SV | Spanisch (El Salvador) |
| es-UY | Spanisch (Uruguay) |
| es-VE | Spanisch (Venezuela) |
| et | estnisch |
| et-EE | estnisch |
| EU | baskisch |
| eu-ES | baskisch |
| Fa | Französisch |
| Tanne | Französisch |
| fi | finnisch |
| fi-FI | finnisch |
| fo | färöisch |
| fo-FO | färöisch |
| fr | Französisch |
| fr-BE | Französisch (Belgien) |
| fr-CA | Französisch (Kanada) |
| fr-CH | Französisch (Schweiz) |
| fr-FR | Französisch Frankreich) |
| fr-LU | Französisch (Luxemburg) |
| fr-MC | Französisch (Monaco) |
| gl | galizisch |
| gl-ES | galizisch |
| gu | Gujarati |
| gu-IN | Gujarati |
| Er | hebräisch |
| er-IL | hebräisch |
| Hi | Hindi |
| Hallo-IN | Hindi |
| Std | kroatisch |
| hr-BA | Kroatisch (Bosnien und Herzegowina) |
| HR-HR | kroatisch |
| Hu | ungarisch |
| Hu-HU | ungarisch |
| hy | Armenisch |
| hy-AM | Armenisch |
| AUSWEIS | Indonesisch |
| Ich tat | Indonesisch |
| Ist | isländisch |
| ist-IST | isländisch |
| Es | Italienisch |
| jucken | Italienisch (Schweiz) |
| es es | Italienisch (Italien) |
| ja | japanisch |
| ja-JP | japanisch |
| ka | georgisch |
| ka-GE | georgisch |
| kk | Kasachisch |
| kk-KZ | Kasachisch |
| kn | Canara |
| kn-IN | Canara |
| ko | koreanische Sprache |
| ko-KR | koreanische Sprache |
| kok | Konkani |
| kok-IN | Konkani |
| ky | Kirgisisch |
| ky-KG | Kirgisisch (Kyrillisch) |
| lt | litauisch |
| lt-LT | litauisch |
| lv | lettisch |
| lv-LV | lettisch |
| mi | Maori |
| mi-NZ | Maori |
| mk | mazedonisch |
| mk-MK | Mazedonisch (EJRM) |
| mn | mongolisch |
| mn-MN | Mongolisch (Kyrillisch) |
| Herr | Marathi |
| Herr-IN | Marathi |
| MS | malaiisch |
| ms-BN | Malaiisch (Brunei Darussalam) |
| ms-MY | Malaiisch (Malaysia) |
| mt | maltesisch |
| mt-MT | maltesisch |
| nb | Norwegisch (Berkemeier) |
| Hinweis: Nein | Norwegisch (Berkemeier) (Norwegen) |
| nl | Niederländisch |
| nl-BE | Niederländisch (Belgien) |
| nl-NL | Niederländisch (Niederlande) |
| n-NEIN | Norwegisch (Nynosk) (Norwegen) |
| ns | Nord-Sotho |
| n-ZA | Nord-Sotho |
| pa | Punjabi |
| Schmerz | Punjabi |
| pl | Polieren |
| pl-PL | Polieren |
| pt | Portugiesisch |
| pt-BR | Portugiesisch (Brasilien) |
| pt-PT | Portugiesisch (Portugal) |
| qu | Quechua |
| qu-BO | Quechua (Bolivien) |
| que C | Quechua (Ecuador) |
| qu-PE | Quechua (Peru) |
| ro | rumänisch |
| ro-RO | rumänisch |
| ru | Russisch |
| ru-RU | Russisch |
| sa | Sanskrit |
| sa-IN | Sanskrit |
| se | Nördliches Samos |
| se-FI | Nord-Samoan (Finnland) |
| se-FI | Scott Samos (Finnland) |
| se-FI | Inari Samos (Finnland) |
| se-NR | Nordsamoan (Norwegen) |
| se-NR | Lulea Samos (Norwegen) |
| se-NR | Süd-Samos (Norwegen) |
| se-SE | Nordsamian (Schweden) |
| se-SE | Lulea Samos (Schweden) |
| se-SE | Süd-Samos (Schweden) |
| sk | slowakisch |
| sk-SK | slowakisch |
| sl | Slowenisch |
| sl-SI | Slowenisch |
| Quadrat | albanisch |
| sq-AL | albanisch |
| SR-BA | Serbisch (Latein, Bosnien und Herzegowina) |
| SR-BA | Serbisch (Kyrillisch, Bosnien und Herzegowina) |
| SR-SP | Serbien (Latein) |
| SR-SP | Serbien (Kyrillisch) |
| sv | Schwedisch |
| SV-FI | Schwedisch (Finnland) |
| SV-SE | Schwedisch |
| sw | Suaheli |
| sw-KE | Suaheli |
| Sir | Syrisch |
| syr-SY | Syrisch |
| ta | Tamil |
| ta-IN | Tamil |
| Te | Telugu |
| te-IN | Telugu |
| Th | Thailändisch |
| Th-TH | Thailändisch |
| tl | Tagalog |
| tl-PH | Tagalog (Philippinen) |
| tn | Tswana |
| tn-ZA | Tswana |
| tr | Türkisch |
| tr-TR | Türkisch |
| ts | Dzonga |
| tt | Tatarisch |
| tt-RU | Tatarisch |
| Vereinigtes Königreich | ukrainisch |
| UK-UA | ukrainisch |
| ur | Urdu |
| ur-PK | Urdu |
| uz | Usbekisch |
| uz-UZ | Usbekisch (Latein) |
| uz-UZ | Usbekisch (Kyrillisch) |
| vi | Vietnamesisch |
| vi-VN | Vietnamesisch |
| xh | Bantusprache |
| xh-ZA | Bantusprache |
| zh | Chinesisch |
| zh-CN | Vereinfachtes Chinesisch) |
| zh-HK | Chinesisch (Hongkong) |
| zh-MO | Chinesisch (Macao) |
| zh-SG | Chinesisch (Singapur) |
| zh-TW | traditionelles Chinesisch) |
| zu | Zulu |
| zu-ZA | Zulu |
