Der gesamte Prozess der Realisierung der Website-Internationalisierung mit Vite2 und Vue3

Vorwort

In letzter Zeit haben sich einige Leute über viele Probleme beschwert, die nach der Verwendung von Vue3 in ihren Projekten auftraten, und es war schwierig, die Lücken zu schließen. Einige Leute stellten während der Entwicklung sogar fest, dass einige Bibliotheken von Drittanbietern keine Vue3-Versionen starteten. Daher beschwerten sie sich viel und empfahlen dringend, Vue3 nicht zu verwenden.

Eine gute technische Voruntersuchung und Kompatibilitätsprüfung gehört zu den Aufgaben vor der Entwicklung, insbesondere bei neuen Technologien oder größeren Versionsupdates. Sofern Sie nicht besonders mutig sind, sollten Sie diese nicht ohne ausreichende Voruntersuchung in formellen Projekten einsetzen.

Vor kurzem habe ich eines meiner Vue3-Projekte mit einer internationalen Konfiguration verbunden. Der Gesamtprozess unterscheidet sich nicht wesentlich von Vue2. Ich möchte hier meine technischen Erfahrungen teilen.

Installieren Sie vue-i18n

npm ich vue-i18n --speichern

Vue-i18n wird hier verwendet, um Internationalisierung und Mehrsprachenumschaltung zu implementieren. Der Name i18n setzt sich eigentlich aus dem ersten und letzten Buchstaben des englischen Wortes Internationalization und der Zahl 18 in der Mitte zusammen, was „Internationalisierung“ bedeutet.

Konfigurieren von Gebietsschemas

Erstellen Sie im Projekt „src“ einen neuen Ordner „Locales“ und darin einen neuen Ordner „Language“, um Textkonfigurationen für jede Sprache zu speichern. Erstellen Sie die Ordner „en“ und „zh-CN“ in der Sprache und erstellen Sie entsprechend „index.js“, indem Sie den folgenden Inhalt einfügen:

// src/locales/language/zh_CN/index.js

Standard exportieren {

    Titel: "Chinesischer Titel",

}

// src/locales/language/de/index.js

Standard exportieren {

    Titel: "Englischer Titel",

}

Implementierung von getLangs.js

Erstellen Sie in den Gebietsschemas eine neue Datei getLangs.js, um das Sprachpaket im Sprachordner abzurufen und verfügbar zu machen.
Hier kommt das Plugin lodash-es zum Einsatz, dieses musst du installieren:

npm ich lodash-es --save

Der spezifische Code lautet wie folgt:

importiere { set } von 'lodash-es'

const module = import.meta.globEager('./sprache/**/*.js')

Funktion getLanguages(langs, Präfix = 'lang') {

  const obj = {}

  Object.keys(langs).forEach((key) => {

    const mod = langs[key].default

    lass k = Schlüssel.Ersetzen(`./${prefix}/`, '').Ersetzen(/^\.\//, '')

    const lastIndex = k.lastIndexOf('.')

    k = k.Teilzeichenfolge(0, letzterIndex)

    const keyList = k.split('/')

    const lang = keyList.shift()

    const objKey = keyList.join('.')

    if (lang) {

      set(obj, lang, obj[lang] || {})

      set(obj[lang], objKey, mod)

    }

  })

  Rückgabeobjekt

}

const { Sprache } = getLanguages(Module)

Standardsprache exportieren

Erstellen einer i18n-Instanz

Als Nächstes müssen Sie eine i18n-Instanz erstellen und sie in Vue einbinden. Erstellen Sie in den Gebietsschemas ein neues i18n.js. Der Code lautet wie folgt:

importiere { createI18n } von 'vue-i18n'

Nachrichten aus „./getLangs“ importieren

exportiere Standard createI18n({

  Vermächtnis: falsch,

  Gebietsschema: window.localStorage.getItem("lang") || 'zh_CN',

  Nachrichten,

})

Sie können sehen, dass die Standardsprachenkonfiguration hier aus dem localStorage im Browser abgerufen wird. Wenn kein localStorage vorhanden ist, lautet sie „zh-CN“. Nach dem Wechseln der Sprache muss die aktuelle Sprache gespeichert werden. Andernfalls wird beim Aktualisieren durch den Benutzer zur Standardsprachkonfiguration zurückgekehrt.
In main.js importieren:

importiere i18n aus './locales/i18n'

const app = createApp(App)

app.verwenden(I18n).mount("#app")

In Vorlage verwenden

Hier wird die Kompositions-API verwendet, um sie einzuführen und zu verwenden. An der entsprechenden Stelle der Vorlage wird die t-Funktion verwendet, um den Anzeigetext unter der aktuellen Sprachkonfiguration abzurufen. Die Funktion empfängt den Pfad der Sprachkonfigurationsdatei und des Attributs und verbindet sie über eine Punktsyntax. Wenn es nicht gefunden werden kann, wird der gesamte Funktionsname in Zeichenform angezeigt.

<Vorlage>

<p>{{t(`index.title`)}}</p>

</Vorlage>

importiere { useI18n } von "vue-i18n";

Standard exportieren {

    aufstellen() {

        const { t } = useI18n();

        Rückkehr { t }

    }

}

Sprachumschaltung

Es gibt zwei gängige Möglichkeiten, die Sprache zu wechseln. Eine besteht darin, die aktuelle Sprachkonfiguration in die URL einzutragen. Beim Umschalten der Sprache springt die Seite zur entsprechenden Route und zeigt dann den entsprechenden Text in der aktuellen Sprache an.

Die zweite ist ein Wechsel ohne Aktualisieren/Springen, der die aktuelle Sprache im lokalen Cache speichert und die Sprache durch Ändern des Gebietsschemawerts von vue-i18n wechselt.
Hier empfiehlt sich die zweite Methode. Zum Umschalten der Sprache ist kein Aktualisieren der Seite oder Springen erforderlich.

<Vorlage>

  <a

    href="javascript:;"

    @click="setLocals(locale === 'zh_CN' ? 'en' : 'zh_CN')"

  >

    {{ locale === 'zh_CN' ? '英' : '中' }}

  </a>

</Vorlage>

<Skript>

importiere { useI18n } von "vue-i18n";

importiere { ref } von "@vue/reactivity";

Standard exportieren {

aufstellen() {

    const { t, Gebietsschema } = useI18n();

    const getLocals = () => window.localStorage.getItem("lang") || locale.value;

    const currentLocale = ref(getLocals());

    const setLocals = (lang = "") => {

      locale.value = Sprache;

      window.localStorage.setItem("lang", lang);

    };

    if (!window.localStorage.getItem("lang")) {

      setLocals(aktuellesGebietsschema.Wert);

    } anders {

      wenn (aktuellerGebietsschemawert !== Gebietsschemawert) {

        setLocals(aktuellesGebietsschema.Wert);

      }

    }

    zurückkehren {

      T,

      Gebietsschema,

      setLocals,

    };

  },

};
</Skript>

Rufen Sie während der Initialisierung zunächst die aktuelle Sprache lokal ab. Wenn dies nicht möglich ist, rufen Sie die Standardsprachkonfiguration ab. Beim Wechseln der Sprachen müssen Sie nicht nur den Gebietsschemawert ändern, sondern auch eine Kopie der aktuellen Sprache im lokalen Cache speichern.

Über die Notwendigkeit einer Aktualisierung nach dem Wechsel, damit diese wirksam wird

Im obigen Beispiel kann der direkt mit der t-Funktion im Template gerenderte Text die Anzeigesprache aktualisieren, ohne dass beim Umschalten der Sprache eine Aktualisierung erfolgt. Wird die t-Funktion jedoch direkt im Setup verwendet, erfolgt die Aktualisierung nicht sofort und wird erst nach einer Aktualisierung wirksam.

Es ist nicht empfehlenswert, die t-Funktion außerhalb von Templates zu verwenden. Bei Bedarf können Sie mehrsprachige Texte in der Komponente definieren und im Template in Form von Schlüssel-Wert-Paaren darauf zugreifen.

Das Umschalten der Sprachen löst Aktualisierungen anderer Komponenten aus

In einigen Szenarien wird der auf der Seite angezeigte Text extern abgerufen und kann nicht direkt durch Sprachumschaltung aktualisiert werden. Es ist erforderlich, einen Broadcast-Effekt ähnlich dem von Geschwisterkomponenten zu implementieren.

In Vue3 wurde die Verwendung globaler Bugs abgebrochen und stattdessen können Plug-Ins wie mitt verwendet werden.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Vite2 und Vue3 zur Internationalisierung von Websites. Weitere relevante Inhalte zur Internationalisierung von Websites mit Vite2 und Vue3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!