Vue uses Vue-i18n to achieve international realization code

The company project needs internationalization, click the button to switch Chinese / English

1, mount

   
2, in the Vue instance, the item is implemented in the project to call API and template syntax

Import Vuei18n from ‘Vue-I18n’Vue.use (Vuei 18n); Const I18N = New Vuei18N ({locale:’ zh-cn ‘, // Identification, by switching the value of LOCALE to implement language switching, this. $ I18n.locale Messages: {‘zh-cn’: Require (‘./ Common / Lang / EN’), // Chinese Language Bread ‘EN-US’ : Require (‘./ Common / Lang / En’) // English Language Pack}} New Vue ({EL: ‘#App’, I18N, // Last Router, Template: ‘, Components: { App}})

 3, corresponding language pack    zh.js Chinese language package: 

Export constrang = {homeoverview: ‘Home Overview’, FirmoverView: ‘Company Overview’, FirmReports: ‘Financial Statement’, FIRMAPPPpendix: ‘More Appendix’, FirminDEX: ‘Main Financial Indicators’, Firmanalysis: ‘Contrast Analysis’, FirmNews: ‘News Event Archive’, Firmother: ‘Other Features’,}

en.js in English language pack:
   export const lang = {homeOverview: 'Home overview', firmOverview: 'firmOverview', firmReports: 'firmReports', firmAppendix: 'firmAppendix', firmIndex: 'firMindex', FirManalysis', FirmNews: 'firmnews', firMother:' firmother '} 

4, button control switching language
  THIS. $ I18n.locale, when you assign a value of 'zh-cn', the navigation bar becomes Chinese; when it is 'en-us', it becomes English:  

Changelangevent () {Console.log (‘ Changelangevent ‘); this. $ confirm (‘ OK STD language? ‘,’ prompt ‘, {confirmButTentext:’ deterministic ‘, CancelButtonText:’ Cancel ‘, Type:’ Warning ‘}). Then (() => {IF (this. $ I18n.loCale === ‘en-cn’) {this. $ I18n.locale = ‘en-us’; // Key statement console.log (‘ en-us’)} else {this. $ I18n.locale = ‘zh -Cn ‘; // Key statement console.log (‘ zh-cn ‘)}}). Catch (() => {Console.log (‘ catch ‘); this. $ Message ({type:’ Info ‘, });});}
  
5, template rendering
Static rendering:
  {{{$ T ('Lang .homeOverView')}}  

If it is Element-UI, in front of the previous plus colon

such as: label = “User Name” is changed: label = “$ T (‘Order.userName’) Dynamic rendering:

 {{nAVCompany}}  computed: {navCompany: function () {IF (this.nav_company) {let str = 'lang' + this.nav_company; return this. $ t (str);}}},    {{GetTitle (TITLE1)}}}}  Methods: {GetTitle (Title) {let str = 'lang.' + title; return this. $ T (STR);}}  

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment