Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie vue-i18n, um Vue-Code zu internationalisieren

Verwenden Sie vue-i18n, um Vue-Code zu internationalisieren

php中世界最好的语言
php中世界最好的语言Original
2018-05-25 15:37:582714Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von vue-i18n zur Internationalisierung von Vue-Code und zur Verwendung von vue-i18n zur Internationalisierung von Vue-Code vorstellen. Das Folgende ist ein praktischer Fall, 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

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 }
})

3

zh.js Chinesisches Sprachpaket:

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

en.js Englisches Sprachpaket:

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

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:

<p class="top_btn" @click="changeLangEvent">中文</p>
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',
   });
  });
 }

5. Vorlagen-Rendering

Statisches Rendering:

<span v-text="$t(&#39;lang .homeOverview&#39;)"></span>
<span>{{$t('lang .homeOverview')}}</span>

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);
  }
}

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:

Detaillierte Erläuterung der Schritte für Vue-Komponenten, um Slots zum Verteilen von Inhalten zu verwenden

Wie man es implementiert WeChat-Applet-Anmeldeauthentifizierung

Das obige ist der detaillierte Inhalt vonVerwenden Sie vue-i18n, um Vue-Code zu internationalisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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