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
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 } })
3. Corresponding language package
zh.js Chinese language package:
export const lang = { homeOverview:'首页概览', firmOverview:'公司概述', firmReports:'财务报表', firmAppendix:'更多附录', firmIndex:'主要财务指标', firmAnalysis:'对比分析', firmNews:'新闻事件档案', firmOther:'其他功能', }
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' }
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>
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', }); }); }
Static rendering:
<span v-text="$t('lang .homeOverview')"></span> <span>{{$t('lang .homeOverview')}}</span>
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); } }
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!