Article From:

Relative to some needs such as website, we need to do international needs. The specific steps are as follows:

First install vue-i18n

npm install vue-i18n

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // Mount it as a plug-inConst I18N = new VueI18n ({Locale:'zh-CN', // Language Identification// this. $i18n. locale // / by cuttingLanguage switching by changing the value of localeMessages: {'zh-CN': require ('. / common / Lang / zh'), // Chinese Language Pack'en-US': require ('. / common / Lang / en') / / English language package}}/* eslint-disable no-new*/New Vue ({)El:'#aPp',I18n, //Don't forgetStore,Router,Template:'< App/>',Components: {App}}

The above code formally introduces vue-i18n into the Vue project, creating an I18N instance object to facilitate global invocation. Throughthis.$i18n.locale Language switching

Two JS files are required to be introduced into main. JS in the form of require.

en.js English Language Package:

export const m = {
music: ‘Music’,//NetEase cloud music
findMusic: ‘FIND MUSIC’,//Discover music
myMusic: ‘MY MUSIC’,//My music
friend: ‘FRIEND’,//Friend
musician: ‘MUSICIAN’,//Musician
download: ‘DOWNLOAD’//Download Client
zh.jsChinese Language Pack:

export const m = { music: ‘FindMusic:‘Discover Music’, myMusic:‘My music’, friend:‘Friends’, musician:‘Musician’, download:‘Download Client’}

How to switch the value of locale in components to achieve language switching.

locale: ‘zh-CN’, // Language identification
messages: {
‘zh-CN’: require(‘./common/lang/zh’), // Chinese Language Pack
‘en-US’: require(‘./common/lang/en’) // English Language Pack

 changeLangEvent() {
   this.$confirm('Are you sure about switching languages?','Tip', {
       confirmButtonText: 'Confirm ',
       cancelButtonText: 'Cancel ',
       type: 'warning'
    }).then(() => {
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//Key sentences
       }else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//Key sentences
    }).catch(() => {
           type: 'info',

The key point here is to point out the key sentences.this.$i18n.locale,When you assign `zh-CN’, the navigation bar becomes Chinese; when you assign `en-US’, it becomes English.

vue-i18n Template Grammar for Data Rendering
We know that the rendering of text data in Vue is in the form of'{}’, or v-text, v-html, etc. After the same use is internationalized, it can still be used, but it needs a little modification.

<span v-text=”$t(‘’)”></span>




Link of this Article: Internationalize with Vue

Leave a Reply

Your email address will not be published. Required fields are marked *