Wie kann man mit Vue Mehrsprachigkeit und Internationalisierung erreichen?

Mit der Entwicklung der Globalisierung sind Mehrsprachigkeit und Internationalisierung zunehmend zu einer der notwendigen Funktionen einer Website oder Anwendung geworden. Als beliebtes Frontend-Framework bietet Vue auch diesbezüglich flexible Lösungen. In diesem Artikel wird erläutert, wie Sie mit Vue Mehrsprachigkeit und Internationalisierung erreichen.

1. Installieren Sie Vue-i18n

Vue-i18n ist ein Internationalisierungs-Plug-in für Vue.js, das uns dabei helfen kann, Mehrsprachigkeit und Internationalisierung zu erreichen. Zuerst müssen Sie Vue-i18n im Projekt installieren.

npm install vue-i18n --save

2. Sprachdateien erstellen

Erstellen Sie einen i18n-Ordner im Projekt, um Sprachdateien zu speichern.

Erstellen Sie eine Datei mit dem Namen index.js im i18n-Ordner, um Vue-i18n zu konfigurieren.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

Im obigen Code gibt locale die aktuell verwendete Sprache an und Englisch wird standardmäßig verwendet. message stellt die verwendete Sprachdatei dar, in der en.json (Englisch) bzw. zh.json (Chinesisch) eingeführt werden.

Sie können jetzt en.json- und zh.json-Dateien im i18n-Ordner erstellen und Sprachinhalte schreiben.

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

3. Die Verwendung von Vue-i18n

Die Verwendung von Vue-i18n in Komponenten ist sehr einfach. Fügen Sie einfach $tc (Übersetzung) oder $t (Formatierung) zur Vorlage hinzu. Das war’s .

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

Im obigen Code können sowohl $t als auch $tc für die Übersetzung verwendet werden. Der Unterschied besteht darin, dass $t formatiert und $tc entsprechend den Parametern pluralisiert werden kann. Außerdem wird die Verwendung der $t-Methode im berechneten Attribut und die Änderung der Sprache im erstellten Lebenszyklus der Komponente demonstriert.

4. Verwenden Sie das Vue CLI-Plug-in

Vue CLI bietet das offizielle Plug-in vue-cli-plugin-i18n, das schnell Mehrsprachigkeit und Internationalisierung integrieren kann.

Sie müssen zuerst das Plug-in installieren.

vue add i18n

Nach erfolgreicher Installation wird im Projekt ein Locales-Ordner zum Speichern von Sprachdateien generiert.

Ändern Sie die Datei src/i18n.js.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

Im obigen Code wird die Funktion „loadLocaleMessages“ verwendet, um die Sprachdateien automatisch in den Ordner „locales“ zu laden und das Nachrichtenobjekt zurückzugeben. Darüber hinaus können die Standardsprache und die Fallback-Sprache über die Umgebungsvariablen VUE_APP_I18N_LOCALE und VUE_APP_I18N_FALLBACK_LOCALE festgelegt werden.

Verwenden Sie die Methode $te in der Komponente, um zu bestimmen, ob der Schlüsselwert vorhanden ist, und die Methode $d, um das Datum zu formatieren.

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

Das Obige ist die grundlegende Methode zur Verwendung von Vue, um Mehrsprachigkeit und Internationalisierung zu erreichen. Mit dem Vue-i18n-Plugin oder dem Vue CLI-Plugin können Sie problemlos Mehrsprachen- und Internationalisierungsfunktionen implementieren und so die Website oder Anwendung besser an den Trend der Globalisierung anpassen.

Das obige ist der detaillierte Inhalt vonWie kann man mit Vue Mehrsprachigkeit und Internationalisierung erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!