Vue-i18 plugin to implement multilingual switching function in VUE

In the Vue-CLI project development process, the multilingual switching function can use the VUE-I18 plugin, the specific implementation method is as follows:

Step1: Install the VUE-I18 plugin in the project


Step2: Inlet in the project File main.js introduced VUE-I18N plug-in

Import Vue from ‘Vue’ Import Router from ‘./Router’ Import Vuei18n from ‘Vue -i18n ‘vue.use (vuei18n) const I18n = new vuei18n ({locale:’ zh ‘, // language identifier Messages: {‘ zh ‘: Require (‘ ./ assets / lang / zh ‘),’ en ‘: Require (‘./ assets / lang / en’)}} // Vue instance introduced / * eslint-disable no-new * / new vue ({EL: ‘#app “, i18n, router, template:’
‘, Components: {layout},})
  STEP3: When   
is used in the template, There are about three cases, if there is a omission, I hope everyone will correct

MODUle.exports = {MENU: {Home: “Home”}, content: {main: “Here is the content”}}

  Module.Exports = {MENU: {Home: "Home"}, content: {main: "this is content"}  

1) As the text content in the label

  {{$ T ('menu.home')}}  

2) Use


Console.log (this. $ T (‘content.main’));
   4) Treatment ...  
Step4: On the page, in the middle and English switches, bind events on the button in Chinese and English, as follows:

Taben: function () {this. $ I18n.locale = ‘en’}, tabcn: function () {this. $ I18n.locale = ‘zh’}

 To this, the VUE-I18N plugin is used.   

The above is the use of Vue-i18 plug-in to use the Vue-I18 plug-in to make a multi-language switching function, I hope that if you have any questions if you have any questions. Please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment