vue verwendet vue-i18n, um Internationalisierungscode zu implementieren

In diesem Artikel wird hauptsächlich der Implementierungscode von vue mithilfe von vue-i18n vorgestellt, um eine Internationalisierung zu erreichen. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

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: &#39;<App/>&#39;,
 components: { App }
})

3. Entsprechendes Sprachpaket

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 Navigationsleiste chinesisch; wenn der Wert „en-US“ zugewiesen wird, wird sie 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(&#39;lang .homeOverview&#39;)}}</span>

Wenn es element-ui ist, fügen Sie einen Doppelpunkt vor dem ein, was Sie übersetzen möchten

Zum Beispiel: label="Benutzername" 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 = &#39;lang&#39;+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 = &#39;lang.&#39;+title;
    return this.$t(str);
  }
}

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JavaScript generiert eine Zeitliste innerhalb eines bestimmten Bereichs

nodejs-Methode zum Implementieren des Datei-Uploads basierend auf Express

Detaillierte Erläuterung der Parameter basierend auf webpack.config.js

Das obige ist der detaillierte Inhalt vonvue verwendet vue-i18n, um Internationalisierungscode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!