vue utilise vue-i18n pour implémenter le code d'internationalisation-js tutoriel-php.cn

vue utilise vue-i18n pour implémenter le code d'internationalisation

亚连

Libérer： 2018-05-26 09:48:46

original

1681 Les gens l'ont consulté

Cet article présente principalement le code d'implémentation de vue utilisant vue-i18n pour réaliser l'internationalisation. Maintenant, je le partage avec vous et vous donne une référence.

Exigences

Les projets de l'entreprise doivent être internationalisés, cliquez sur le bouton pour changer de chinois/anglais

Installation

npm install vue-i18n --save

Copier après la connexion

2. Injectez dans l'instance de vue et implémentez l'API d'appel et la syntaxe du modèle dans le projet

import VueI18n from &#39;vue-i18n&#39;

Vue.use(VueI18n) ;

const i18n = new VueI18n({
  locale: &#39;zh-CN&#39;,  // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
   &#39;zh-CN&#39;: require(&#39;./common/lang/zh&#39;),  // 中文语言包
   &#39;en-US&#39;: require(&#39;./common/lang/en&#39;)  // 英文语言包
  }
})

new Vue({
 el: &#39;#app&#39;,
 i18n, // 最后
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Copier après la connexion

3. >

Pack de langue chinoise zh.js :

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

Copier après la connexion

Pack de langue anglais en.js :

export const lang = {
 homeOverview:&#39;Home overview&#39;,
 firmOverview:&#39;firmOverview&#39;,
 firmReports:&#39;firmReports&#39;,
 firmAppendix:&#39;firmAppendix&#39;,
 firmIndex:&#39;firmIndex&#39;,
 firmAnalysis:&#39;firmAnalysis&#39;,
 firmNews:&#39;firmNews&#39;,
 firmOther:&#39;firmOther&#39;
}

Copier après la connexion

Contrôle des boutons pour changer de langue

4. 🎜>

<p class="top_btn" @click="changeLangEvent">中文</p>

Copier après la connexion

this.$i18n.locale, lorsque vous attribuez la valeur à 'zh-CN', la barre de navigation devient chinoise ; lorsque la valeur est attribuée à 'en-US', elle devient anglaise :

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

Copier après la connexion

5. Rendu du modèle

Rendu statique :

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

Copier après la connexion

S'il s'agit d'un élément- ui, devant ce que vous voulez traduire Ajoutez deux points

Par exemple : label="user name" est remplacé par : label="$t('order.userName')"

Rendu dynamique :

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

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.