Vue implementiert die Internationalisierung der Sprachumschaltung für Webseiten

1. Grundlegende Schritte

1: Installieren Sie yarn add vue-i18n

Erstellen Sie eine neue .js-Datei in diesem Pfad: src/lang/index.js :

2: Import

importiere VueI18n von „vue-i18n“

3: Registrieren

Vue von „vue“ importieren

Vue.verwenden(VueI18n)

4: Instanziierung

const i18n = neuer VueI18n({
	locale:'Die aktuelle Sprachkennung', // en: Englisch zh: Chinesische Nachrichten:{
		// Sprachpaket en:{
		Zuhause:'Zuhause'
		},
		zh:{
		home:'Startseite'
		}
	}
})

5: Entblößt

Standard-i18n exportieren

6: In main.js einbinden

importiere i18n von '@/lang'
neuer Vue({
i18n
})

Verwenden Sie: <div>{ {$t('home')}}</home>

2. Importieren Sie die internationale Sprachkonfiguration von element-ui in main.js

importiere i18n aus „./lang/index“
importiere ElementUI von „element-ui“
Vue.use(ElementUI, {
  i18n: (Schlüssel, Wert) => i18n.t(Schlüssel, Wert)
})

3. Erstellen Sie eine neue VUE-Datei, um die Sprache über Schaltflächen zu wechseln

Beachten:

this.$i18n.locale kann die aktuelle Sprache abrufen und festlegen und die Internationalisierung in js-Dateien verwenden

4. Um die Internationalisierung des Website-Menüs zu erreichen, müssen Sie es in das Routing einführen

Nach import i18n from '@/lang' i18n.t===this.$t

Damit schließen wir diesen Artikel über die Implementierung der Internationalisierung von Webseitensprachen durch Vue ab. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.