Home > Web Front-end > JS Tutorial > body text

Use vue-i18n to internationalize vue code

php中世界最好的语言
Release: 2018-05-25 15:37:58
Original
2718 people have browsed it

This time I will bring you the use of vue-i18n to internationalize vue code, and what are the precautions for using vue-i18n to internationalize vue code. The following is a practical case, let's take a look.

Requirements

Company projects need to be internationalized, click the button to switch Chinese/English

1, Installation

npm install vue-i18n --save
Copy after login

2. Inject into the vue instance and implement calling api and template syntax in the project

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 }
})
Copy after login

3. Corresponding language package

zh.js Chinese language package:

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

en.js English language package:

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

4. Button control to switch language

this.$i18n.locale, when you assign the value to 'zh-CN', the Navigation column becomes Chinese; when the value is assigned to 'en-US', it becomes English:

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

5, Template rendering

Static rendering:

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

If it is element-ui, please Add a colon in front of the translation

For example: label="user name" is changed to: label="$t('order.userName')"

Dynamic 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);
  }
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps for vue components to use slots to distribute content

How to implement WeChat applet login authentication

The above is the detailed content of Use vue-i18n to internationalize vue code. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!