Front-end frame vue.js--vue-i18n, how to achieve internationalization in Vue project

Learn a little bit of programming every day PDF ebook, video tutorial free download:
Http://www.shitanlife.com/code I. Preface

Take advantage of the last day of October to write a practical blog about the internationalization of the front-end. Internationalization should be not unfamiliar, is a website, application can realize the language switch.

In this not to talk about the principle, only to say how to achieve the Chinese and English switching. Do the technology must first make the demo.

Second, the demo scene needs analysis

The demand is very simple, the upper left corner ' NetEase Cloud Music ' is a Chinese and English toggle button, click the Pop-up prompt box, confirm the switch language, the implementation of the English version.

Switch to English version:

Third, to achieve internationalization

First of all, I developed a technology stack with Vue, so the internationalized plugin for the title is vue-i18n, attached to the GitHub portal.

1, we must first have the development environment, first has the project to run up, I recommend if is likes with Vue's small companion, may try vue-cli the official scaffolding. I've got a scaffold demo on this side, which will help you quickly develop the Vue module.

2, we need to install VUE-I18N, recommended NPM package dependency:

$ npm install vue-i18n

Of course you can do the same:

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

3, injected into the Vue instance, implementation of the call API and template syntax in the project

This way I'm running along with NPM installation dependencies. First introduce vue-i18n in the main.js.

Import vuei18n from' vue-i18n ' vue.Use (vuei18n)//by Plug-in form const i18n = new vuei18n ({locale:  ' ZH-CN ', //language identification  this. $i 18n.locale//switch locale value to implement language switching messages: { ' ZH-CN ': require (// Chinese language Pack  ' en-us ': require (/common/ lang/en ') //English Language Pack}) /* eslint-disable no-new */new Vue ({el:  ' #app ', i18n, //don't forget store, router, Template:       

The code above formally introduces vue-i18n into the Vue project, creating an i18n instance object that is convenient for global invocation. We use the this.$i18n.locale language to switch, the same example of my side is by clicking on the event, click on the "NetEase Cloud Music", to trigger the event, switch the value of the locale.

4, OK, the introduction of the thing is this, then since the internationalization, this is a simple way to switch between Chinese and English, then naturally we need two sets of language documents, vue-i18n relatively simple, only need two JS files, through the form of require introduced to Main.js.

En.js English Language pack:

export const m = {   music: ‘Music‘,//网易云音乐  findMusic: ‘FIND MUSIC‘,//发现音乐 myMusic: ‘MY MUSIC‘,//我的音乐 friend: ‘FRIEND‘,//朋友 musician: ‘MUSICIAN‘,//音乐人 download: ‘DOWNLOAD‘//下载客户端}

Zh.js Chinese Language Pack:

export const m = {  music: ‘网易云音乐‘,  findMusic: ‘发现音乐‘,  myMusic: ‘我的音乐‘, friend: ‘朋友‘, musician: ‘音乐人‘, download: ‘下载客户端‘}

Finally, we only need to control the value of the locale by triggering the event, to call the corresponding language package to achieve internationalization.

5, how to switch the value of the locale in the component, to achieve language switching.

‘zh-CN‘,    // 语言标识    messages: {      ‘zh-CN‘: require(‘./common/lang/zh‘), // 中文语言包 ‘en-US‘: require(‘./common/lang/en‘) // 英文语言包 }

In the code in Main.js, you can see that when the value of locale is ' ZH-CN ', the version is Chinese, and when the locale value is ' en-us ', the version is in English. Of course you can also change to zh and EN, this is not fixed, only need to correspond.

Well, let's take a look at how to switch between a click event in my component.

/** * Toggle Language */changelangevent () {this. $confirm (' OK to switch languages? ',' Hint ', {confirmbuttontext:' OK ', Cancelbuttontext: ' Cancel ', type:  ' warning '}). then (() = > {if (this.lang = = =  ' Zh-CN ') { Span class= "Hljs-keyword" >this.lang =  ' en-us '; this. $i 18n.locale = this.lang; Key statement}else {this.lang =  ' Zh-CN '; this. $i 18n.locale = this.lang; Key statement}}). catch (() = {this. $message ({ "info",}); });} 

The point here is, "key statement": When this.$i18n.locale you assign a value of ' ZH-CN ', the navigation bar becomes Chinese, and when the assignment is ' en-us ', it becomes English. Is the way the article was before.

6, to this, the front-end vue-i18n internationalization plug-in in the VUE-CLI modular environment of the development practice has been completed.

Iv. template syntax for vue-i18n data rendering

We know that the rendering of text data in Vue has the form of "{{}}" or V-text, v-html and so on, and the same internationalization can still be used, but it needs a little modification.
V-text:

<span v-text="$t(‘m.music‘)"></span>

{{}}:

<span>{{$t(‘m.music‘)}}</span>

Five, VUE-CLI, vue-i18n development practiced hand project address

Project Open source on GitHub, the documentation is perfect, you can try practiced hand, if you feel you can, thank you for giving a star.

If, in VUE development encountered related issues, you can also leave a message, I will not try to help you to answer. Also previously wrote some in the development of solutions, you can look at the blog, a front-end on the road small white, welcome correction.

Learn a little bit of programming every day PDF ebook, video tutorial free download:
Http://www.shitanlife.com/code

Front-end frame vue.js--vue-i18n, how to achieve internationalization in Vue project