Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt

Eine häufige Anforderung ist die Internationalisierung des Frontends. Allerdings gibt es im Internet nicht viele direkt verfügbare Lösungen diesbezüglich. Ich habe vor Kurzem eine mehrsprachige Implementierung auf Basis von Vue.js erstellt und möchte hier eine kurze Zusammenfassung geben.

1. Welche Inhalte müssen üblicherweise verarbeitet werden

Im Allgemeinen umfasst der Inhalt einer Webanwendung, der zwischen mehreren Sprachen umgeschaltet werden muss, häufig die folgenden Aspekte:

1. Inhalt in der Vorlage, z. B. der Textinhalt im <template>-Tag von Vue.js

2. Textinhalt im JS-Code

3. Der Inhalt der Kopie im Bild

4. Seitentitel

5. Copywriting in Drittanbieterkomponenten (in meinem Projekt werden beispielsweise Vux-Komponenten verwendet)

6. Dateninhalte, die dem Frontend in der Backend-Oberfläche angezeigt werden müssen

7. Von der Backend-Schnittstelle zurückgegebene Fehlermeldung

2. Grundidee

1. Zunächst müssen Sie bestimmen, wie Sie die Sprache erhalten, die aktuell angezeigt werden soll

Ich verwende die Methode, Parameter wie ?lang=en oder ?lang=zh-CN in der URL zu übergeben. Der Vorteil hierbei ist, dass Sie über den Link angeben können, welche Sprache verwendet werden soll. Es ist allerdings auch unpraktisch, sich ausschließlich auf Adressleistenparameter zu verlassen. Beispielsweise können bei einem Seitensprung die Adressleistenparameter verloren gehen. Dies führt dazu, dass Sie nach dem Seitensprung nicht wissen, welche Sprache angezeigt werden soll. Idealerweise sollte dieser Parameter beim Aufrufen einer bestimmten Seite vorhanden sein (zu diesem Zeitpunkt wissen Sie, welche Sprache verwendet werden muss). Beim Springen zu anderen Seiten benötigen Sie den Parameter „lang“ nicht mehr, da Sie bereits wissen, welche Sprache verwendet werden muss. Daher sollte dieser Parameter gleich beim Aufrufen der ersten Seite, beispielsweise im LocalStorage oder im State von Vuex, gespeichert werden.

Dies wirft die Frage der Priorität bei der Sprachbeurteilung auf.

Denn möglicherweise gibt es einen „lang“-Parameter in der Adressleiste, möglicherweise gibt es auch zugehörige Speicherfelder im lokalen Speicher (weil die Anwendung beim letzten Mal besucht wurde), vielleicht möchten Sie auch eine Standard-Fallbacksprache festlegen usw. Wie sollte mit seiner Priorität umgegangen werden?

Die richtige Priorität sollte sein:

Überprüfen Sie zunächst, ob in der Adressleiste ein Parameter vorhanden ist.

Überprüfen Sie, ob sich welche im lokalen Speicher befinden.

Rufen Sie dann die Standardsprache des Browsers über navigator.language ab, um zu sehen, ob es sich um die von Ihrer Anwendung unterstützte Sprache handelt. Wenn ja, verwenden Sie sie.

Als letztes Mittel wird eine Ersatzsprache (z. B. das gebräuchlichere Englisch) verwendet.

Natürlich können Sie dies Ihren Bedürfnissen entsprechend vereinfachen.

2. Zweitens: Welche Tools werden verwendet, um die Probleme der Sprachkonvertierung und -verpackung zu lösen?

(1) Auswahl von i18n-bezogenen Tools - Wer stellt die Mehrsprachen-Konvertierungsfunktion bereit (normalerweise $t)?

Derzeit basieren die meisten gängigen Internationalisierungsmethoden auf i18n. Wir müssen das Rad also nicht neu erfinden. Für den spezifischen Einsatz von i18n gibt es jedoch viele verschiedene NPM-Module. Zum Beispiel vuex-i18n, vue-i18n, simplest-i18n usw. Da die meisten komplexen Projekte Vuex verwenden, ist es für komplexe Projekte bequemer, Vuex-i18n statt Vue-i18n zu wählen.

Das einfachste i18n-Modul, das ein sehr Nischenmodul ist, hat tatsächlich seine Vorteile. Es unterstützt Folgendes:

In der Vorlage:

<span>$t('Echter Name', 'Echter Name')</span>

Oder in JS:

this.$t('Echter Name', 'Echter Name')

Das heißt, die Sprachen werden zusammen geschrieben und jeder Parameter der $t-Funktion ist eine Sprache, die auf einen Blick klar und relativ leicht zu lesen ist. Für kleine Projekte ist es eine Option.

Die grundlegende Verwendung ist wie folgt:

t.js-Datei:

importiere i18n von „simplest-i18n“;
importiere getLang von '../../getLang';

const t = i18n({
  locale: getLang.lang, // aktuelle Sprache locales: getLang.langs // Liste unterstützter Sprachen });
Standard t exportieren;

Erweitern Sie dann Vue.js in der Einstiegsdatei der Anwendung:

importiere t aus './t';
Vue.$t = Vue.prototype.$t = t;

Dadurch wird die Methode $t im globalen Vue.js bereitgestellt. Der Zugriff ist auch über this.$t in der Vue-Instanz möglich, was sehr einfach zu verwenden ist.

Bei großen Projekten ist das Schreiben aller Sprachpakete im Code jedoch nicht wartungsfreundlich. Darüber hinaus kann es das Mehrsprachenproblem der von mir verwendeten Vux-Komponenten nicht lösen.

Daher habe ich mich letztendlich für vuex-i18n als Grundlage entschieden.

(2) Werkzeuge zur Organisation und Verarbeitung von Sprachpaketen: Wie organisiert und verpackt man Sprachpakete?

Um dieses Problem zu lösen, muss ich zuerst das Mehrsprachigkeitsproblem von Vux-Komponenten von Drittanbietern lösen.

Zunächst einmal ist es im Hinblick auf die Organisation von Sprachpaketen üblicher, diese als JSON-Konfigurationsdateien zu schreiben. Ich habe jedoch schließlich das YAML-Format übernommen, das das gemeinsame Schreiben mehrsprachiger Felder unterstützt. Zum Beispiel:

config.yml

bestätigen:
  bestätigen

Anstatt die Mehrsprachigkeit eines Feldes in mehrere Teile aufzuteilen, wie unten gezeigt, zum Beispiel:

bestätigen:

bestätigen: bestätigen

Dies hat den Vorteil, dass Sie verschiedene Sprachversionen eines Felds problemlos vergleichen können. Wenn Sie ein Feld ändern oder löschen möchten, können Sie dies an einer Stelle tun, ohne zwischen den Versionen wechseln zu müssen. Darüber hinaus ist die Syntax der YAML-Datei einfacher und klarer, wodurch viele Probleme entfallen, beispielsweise die Notwendigkeit der Verwendung von Anführungszeichen in JSON-Dateien und das Verbot von Kommentaren.

Zweitens habe ich im Hinblick auf die Verpackung von Sprachpaketen den VUX-Loader gefunden. Es kann mit der vorhandenen Webpack-Konfiguration kombiniert werden, wodurch nicht nur die Verpackung der mehrsprachigen Konfiguration der Vux-Komponente abgeschlossen wird, sondern auch die Verwendung von <i18n>-Tags in benutzerdefinierten Vue-Komponenten ermöglicht wird. Beispielsweise kann ich in einer benutzerdefinierten Komponente Folgendes schreiben:

<i18n>
bestätigen:
  bestätigen
<i18n>

Beim Verpacken exportiert vux-loader die mehrsprachigen Konfigurationsinformationen im <i18n>-Tag in eine von uns konfigurierte YAML-Datei und entfernt den <i18n>-Tag aus unserer benutzerdefinierten Komponente.

Wie geht man also mit YAML-Dateien um? Sie können JSON-Loader und YAML-Loader verwenden. Sie können YAML-Dateien in das von uns benötigte JSON-Format konvertieren, das für die Verwendung in JS-Funktionen praktisch ist, wie folgt:

const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml'); // Dies ruft ein Sprachpaket im JSON-Format ab.

3. Wie teilt man der Backend-Schnittstelle mit, in welcher Sprache Daten zurückgegeben werden sollen?

Da viele Schnittstellen beteiligt sind und dem Backend mitgeteilt werden muss, welche Sprache verwendet werden soll, habe ich mich für die Verwendung der Header-Methode entschieden. Im Axios-Interceptor wird der Anforderung ein Header hinzugefügt: Accept-Language, und der Wert dieses Headers wird auf die Sprache eingestellt, die das Front-End verwenden soll (z. B. zh-CN oder en usw.). Auf diese Weise kann das Problem an einer Stelle gelöst werden.

3. Einige Details in der konkreten Praxis

1. Holen Sie sich die Implementierung des getLang-Moduls in der Sprache, die aktuell verwendet werden soll

importiere { getQueryObj } von '../utils/url';
importiere { setItem, getItem } aus '../utils/storage';

const langs = ['zh-CN', 'en']; // Welche Sprachen werden unterstützt const defaultLang = 'en'; // Standardsprache, noch nicht ausgegeben function getLang() {
  let queries = getQueryObj();
  let storeLang = getItem('lang');
  lass rawLang;
  lass flag = false;

  if (Abfragen && Abfragen['lang']) {
    rawLang = querys['lang'];
    setItem('lang', rawLang);
  } anders {
    rawLang = storeLang || navigator.sprache;
  }

  langs.map(item => {
    wenn (Element === rawLang) {
      Flagge = wahr;
    }
  });
  Rückgabeflag? RawLang: Standardsprache;
}

const lang = getLang(langs, defaultLang);

Standard exportieren {
    lang, // Aktuelle Sprache abrufen langs // Liste der unterstützten Sprachen }

2. Konfiguration mehrsprachiger Pakete für Vux-Komponenten

Sie finden src/locales/all.yml auf dem offiziellen GitHub von Vux, können es kopieren (src/locales/zh-CN.yml und src/locales/en.yml im selben Verzeichnis sind jeweils der chinesische und der englische Teil) und nach Bedarf leichte Änderungen vornehmen.

Importieren Sie es dann in die Eingabedatei Ihrer Anwendung:

const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');

3. Konfiguration des VUX-Loaders

webpack.dev.conf.js:

auflösen(vuxLoader.merge(devWebpackConfig, {
    plugins_dir: [
        „vux-ui“,
        {
            Name: „i18n“,
            vuxStaticReplace: false,
            staticReplace: false,
            extractToFiles: "src/locales/components.yml",
            Gebietsschemaliste: ['en','zh-CN']
        }
    ]
}))

webpack.prod.conf.js:

auflösen(vuxLoader.merge(buildWebpackConfig, {
    plugins_dir: [
        „vux-ui“,
        {
            Name: „i18n“,
            vuxStaticReplace: false,
            staticReplace: false,
            extractToFiles: "src/locales/components.yml",
            Gebietsschemaliste: ['en','zh-CN']
        }
    ]
}))

Die localeList: ['en','zh-CN'] gibt an, welche Sprachen Ihre Anwendung unterstützt.

extractToFiles: „src/locales/components.yml“ gibt die YAML-Datei an, in die die Sprachpaketinformationen in den <i18n>-Tags, die in Ihren benutzerdefinierten Komponenten verwendet werden, exportiert werden sollen. Das heißt, die Sprachpaketinformationen im <i18n>-Tag, die in jeder benutzerdefinierten Komponente verwendet werden, werden vom vux-loader zentral in diese Datei extrahiert.

Importieren Sie dann diese Sprachpaketdatei in die Einstiegsdatei der Anwendung:

const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');

4. Mehrsprachigkeit von Text innerhalb und außerhalb von benutzerdefinierten Komponenten

(1) Um die mehrsprachigen Informationen des Textes innerhalb einer benutzerdefinierten Komponente bereitzustellen, schreiben Sie diese einfach in das <i18n>-Tag der Komponente. Um gleichzeitig Namenskonflikte zwischen mehrsprachigen Feldern in verschiedenen benutzerdefinierten Komponenten zu vermeiden, fügen Sie dem Namen jedes Felds ein Präfix im Komponentennamenstil hinzu.

(2) Seitentitel, einige Fehlermeldungen und andere Texte erscheinen außerhalb der Komponente und sind daher nicht für den <i18n>-Tag der Komponente geeignet. Daher erstellen wir eine separate global.yml-Datei, um diese globalen mehrsprachigen Informationen zu speichern. Diese Inhalte können direkt in global.yml geschrieben werden, und um Konflikte mit anderen Sprachpaketfeldern zu vermeiden, fügen wir vor jedem Feld das Präfix „global-“ hinzu.

Importieren Sie dann diese Sprachpaketdatei in die Einstiegsdatei der Anwendung:

const componentsLocales = erfordern('json-loader!yaml-loader!../../locales/global.yml');

5. Implementierung von vuex-i18n

In der Datei src/store/index.js:

importiere VuexI18n von „vuex-i18n“;

Standardmäßigen Export des neuen Vuex.Store hinzufügen:

    i18n: VuexI18n.store

In der Eingabedatei der Anwendung:

importiere VuexI18n von „vuex-i18n“;
importiere getLang von '../../getLang';

Vue.use(VuexI18n.plugin, speichern);

const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');
const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');

const finalLocales = {
  'en': Objekt.assign(vuxLocales['en'], componentsLocales['en']),
  'zh-CN': Objekt.assign(vuxLocales['zh-CN'], componentsLocales['zh-CN'])
}

für (lass i in finalLocales) {
  Vue.i18n.add(i, finalLocales[i])
}

Vue.i18n.set(globalVars.lang);

6. Mehrsprachigkeit von Bildern

Um die Textinformationen im Bild mehrsprachig zu gestalten, gibt es im Wesentlichen zwei Möglichkeiten: Eine besteht darin, unterschiedliche Bilder je nach Sprache anzuzeigen. Die andere besteht darin, den Text so weit wie möglich vom Bildhintergrund zu trennen und die Methode „Textebene plus Hintergrundbildebene“ zu verwenden, sodass die Textebene als normaler Text verwendet werden kann, um Mehrsprachigkeit zu erreichen. Sie sind alle relativ einfach und werden hier nicht näher erläutert.

7. Wie aktualisiere ich den Inhalt der aktuellen Seite, nachdem ich über die Schaltfläche auf der aktuellen Seite die aktuelle Sprache umgeschaltet habe?

Wenn Ihre Anwendung die Sprachversionen innerhalb der Seite nicht wechseln muss, können Sie verschiedene Sprachparameter direkt in der URL übergeben, dann tritt dieses Problem nicht auf.

Die erste Methode: Aktualisieren Sie die Seite

<button @click="changeLang('zh-CN')">Chinesisch</button>
<button @click="changeLang('en')">Englisch</button>

changeLang(lang){
    location.href = this.$utils.url.replaceParam(this.$router.history.current.path, 'lang', lang);
},

Die zweite Methode: Beobachten Sie die Änderungen des Felds „lang“ in den aktuellen Seitendaten und aktualisieren Sie einige zugehörige Komponenten teilweise über v-if:

Daten(){
    zurückkehren {
        Sprache: this.$i18n.locale()
    }
}

changeLang(lang){
    this.$i18n.set(lang);
    dies.lang = dies.$i18n.locale();
},

betrachten:
    lang(newVal, oldVal) {
        wenn(neuerWert === alterWert) {
            zurückkehren;
        }

        //Ändern Sie hier ein Flag und kombinieren Sie es mit v-if, um das erneute Rendern einer lokalen Komponente auszulösen}
}

Der dritte Weg: Kombinieren Sie vuex, um den globalen Sprachstatus zu versenden, aktualisieren Sie ihn, wenn sich der Status ändert, oder schreiben Sie die Implementierung von vuex-i18n einfach selbst neu. Dieses Verfahren ist relativ aufwändig.

Treffen Sie Ihre Wahl entsprechend den Anforderungen Ihres Unternehmens.

8. Escape von Sonderzeichen in YAML

Einige YAML-Schlüsselwerte, die Sonderzeichen wie [, ] usw. enthalten, müssen maskiert werden. Die Konvertierung erfolgt durch Hinzufügen einfacher Anführungszeichen zum Schlüsselwert.

Wenn Ihre Sprachpaketinformationen einfache Anführungszeichen enthalten, müssen Sie diese mit zwei aufeinanderfolgenden einfachen Anführungszeichen maskieren. Zum Beispiel:

str: 'Tag der Arbeit'

Zusammenfassen

Damit ist dieser Artikel über die Ideen und Praktiken von Vue.js-Frontend-Mehrsprachenlösungen abgeschlossen. Weitere relevante Inhalte zu Vue.js-Frontend-Mehrsprachen 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!