Heim > Web-Frontend > js-Tutorial > Welche Schritte sind erforderlich, um die Internationalisierung von Vue mithilfe von Vue-i18n umzusetzen?

Welche Schritte sind erforderlich, um die Internationalisierung von Vue mithilfe von Vue-i18n umzusetzen?

php中世界最好的语言
Freigeben: 2018-05-26 14:14:01
Original
1795 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte vorstellen, die Vue zur Verwendung von vue-i18n zur Erzielung einer Internationalisierung benötigt . Werfen wir einen Blick darauf.

Anforderungen

Unternehmensprojekte müssen internationalisiert werden, klicken Sie auf die Schaltfläche, um Chinesisch/Englisch zu wechseln

1

Installation

npm install vue-i18n --save
Nach dem Login kopieren

2. In die Vue-Instanz einfügen und Aufruf-API und Vorlagensyntax im Projekt implementieren

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) ;
const i18n = new VueI18n({
  locale: 'zh-CN',  // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
   'zh-CN': require('./common/lang/zh'),  // 中文语言包
   'en-US': require('./common/lang/en')  // 英文语言包
  }
})
new Vue({
 el: '#app',
 i18n, // 最后
 router,
 template: '<App/>',
 components: { App }
})
Nach dem Login kopieren

3

zh.js Chinesisches Sprachpaket:

export const lang = {
 homeOverview:'首页概览',
 firmOverview:'公司概述',
 firmReports:'财务报表',
 firmAppendix:'更多附录',
 firmIndex:'主要财务指标',
 firmAnalysis:'对比分析',
 firmNews:'新闻事件档案',
 firmOther:'其他功能',
}
Nach dem Login kopieren

en.js Englisches Sprachpaket:

export const lang = {
 homeOverview:'Home overview',
 firmOverview:'firmOverview',
 firmReports:'firmReports',
 firmAppendix:'firmAppendix',
 firmIndex:'firmIndex',
 firmAnalysis:'firmAnalysis',
 firmNews:'firmNews',
 firmOther:'firmOther'
}
Nach dem Login kopieren

4. Tastensteuerung zum Wechseln der Sprache

this.$i18n.locale, wenn Sie den Wert „zh-CN“ zuweisen, wird die Spalte

Navigation

chinesisch; wenn der Wert „en-US“ zugewiesen wird wird zu Englisch:

changeLangEvent() {
  console.log('changeLangEvent');
  this.$confirm('确定切换语言吗?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   if ( this.$i18n.locale === 'zh-CN' ) {
    this.$i18n.locale = 'en-US';//关键语句
    console.log('en-US')
   }else {
    this.$i18n.locale = 'zh-CN';//关键语句
    console.log('zh-CN')
   }
  }).catch(() => {
   console.log('catch');
   this.$message({
    type: 'info',
   });
  });
 }
Nach dem Login kopieren

5.

Vorlagen-Rendering

Statisches Rendering:

<span v-text="$t(&#39;lang .homeOverview&#39;)"></span>
<span>{{$t('lang .homeOverview')}}</span>
Nach dem Login kopieren
Wenn ja ist element-ui, fügen Sie bitte einen Doppelpunkt vor der Übersetzung hinzu

Zum Beispiel: label="user name" wird geändert in: label="$t('order.userName')"

Dynamisches Rendering:

<span class="el-dropdown-link">{{navCompany}}</span>
 computed:{
   navCompany:function(){
    if(this.nav_company){
     let str = 'lang'+this.nav_company;
     return this.$t(str);
    }
   }
},
    
 <el-submenu
      v-for="(value, title1, one) in navList"
      :key="one+1"
      :index="(one+1).toString()">
   <template slot="title">
    <router-link :to="linkList[title1]">{{ getTitle(title1) }}</router-link>
   </template>
       
</el-submenu>
methods: {
  getTitle(title){
    let str = 'lang.'+title;
    return this.$t(str);
  }
}
Nach dem Login kopieren
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:

Wie man domänenübergreifende Probleme in Vue-Projekten richtig löst


Wie man vue-cli verwendet Axios-Anfragemethode und domänenübergreifende Verarbeitung

Das obige ist der detaillierte Inhalt vonWelche Schritte sind erforderlich, um die Internationalisierung von Vue mithilfe von Vue-i18n umzusetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage