Quelles étapes sont nécessaires pour implémenter l'internationalisation de vue à l'aide de vue-i18n

Cette fois, je vais vous présenter les étapes nécessaires pour que Vue utilise vue-i18n pour réaliser l'internationalisation. Quelles sont les précautions pour que Vue utilise vue-i18n pour réaliser l'internationalisation. . Jetons un coup d'oeil.

Exigences

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

1 Installation<.>

npm install vue-i18n --save

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 '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. .Pack de langue correspondant

zh.js Pack de langue chinois :

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

en.js Pack de langue anglais :

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

4. Contrôle des boutons pour changer de langue

this.$i18n.locale, lorsque vous attribuez la valeur à 'zh-CN', la colonne

Navigation devient chinoise lorsque la valeur est attribuée ; à 'en-US', en anglais :

<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 Rendu de modèle

Rendu statique. :

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

S'il s'agit d'element-ui, ajoutez deux points devant ce que vous voulez traduire

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

Rendu dynamique :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment résoudre correctement les problèmes inter-domaines dans les projets Vue

Comment utiliser vue-cli axios Méthode de requête et traitement inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!