Verwenden Sie das Vue-i18-Plug-In in Vue, um eine mehrsprachige Umschaltung zu erreichen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung des vue-i18-Plug-Ins in Vue vorstellen, um eine mehrsprachige Umschaltung zu erreichen. Werfen wir einen Blick darauf.

Schritt 1: Installieren Sie das vue-i18-Plug-in im Projekt

cnpm install vue-i18n --save-dev

Schritt 2: Fügen Sie es in die Eintragsdatei des Projekts ein main.js vue-i18n Plug-in

import Vue from 'vue' 
import router from './router' 
import VueI18n from 'vue-i18n' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: 'zh', // 语言标识 
 messages: { 
  'zh': require('./assets/lang/zh'), 
  'en': require('./assets/lang/en') 
 } 
}) 
// vue实例中引入 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 i18n, 
 router, 
 template: '<Layout/>', 
 components: { 
  Layout 
 }, 
})

Schritt 3: Bei Verwendung von

auf der Seite und in der Vorlage gibt es wahrscheinlich die folgenden drei Situationen . Wenn es Auslassungen gibt, teilen Sie mir dies bitte mit. Korrektur

zh.js

module.exports = { 
 menu : { 
   home:"首页" 
 }, 
 content:{ 
   main:"这里是内容" 
 } 
}

en.js

module.exports = { 
 menu : { 
   home:"home" 
 }, 
 content:{ 
   main:"this is content" 
 } 
}

1) Verwenden Sie es als Textinhalt im Tag

<p class="title">{{$t('menu.home')}}</p>

2) Verwenden Sie es als Tag-Attribut

<input :placeholder="$t(&#39;content.main&#39;)" type="text">

3) Bei Verwendung als js-chinesischer Text

console.log(this.$t('content.main'));

4) Wird hinzugefügt...

Schritt 4: Wechseln Sie auf der Seite zwischen Chinesisch und Englisch und verknüpfen Sie die Schaltfläche zum Umschalten zwischen Chinesisch und Englisch. Definieren Sie das -Ereignis wie folgt:

tabEn: function () { 
 this.$i18n.locale = 'en' 
}, 
tabCn: function () { 
 this.$i18n.locale = 'zh' 
}

An dieser Stelle ist die Verwendung des vue -i18n-Plugin ist abgeschlossen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Filter in Vue

So verwenden Sie Vue, um die Klasse von Dom zu bestimmen

Das obige ist der detaillierte Inhalt vonVerwenden Sie das Vue-i18-Plug-In in Vue, um eine mehrsprachige Umschaltung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!