Record the use of vue internationalization i18n

    If the vue framework considers multiple languages, you can use vue-i18n. To install it, directly add the dependent library to the current vue project through npm install vue-i18n --save. In addition, we need to configure multilingual files. Here we use Chinese and English as examples. We create a new languages ​​directory under the assets directory, and then create new zh.json and en.json, which are used to store internationalized files corresponding to their respective languages.

    Since the multilingual file is in json format, it can naturally contain objects and object nesting. Here we organize our multilingual files through object attributes and nesting. The contents are as follows:

    zh.json

{
	"common":{
		"name":"用户名",
		"password":"密码"
	},
	"Settings":{
		"set":"设置",
		"ok":"确定",
		"cancel":"取消",
		"languageSelect":"语言选择"
	}
}

    en.json

{
	"common":{
		"name":"username",
		"password":"password"
	},
	"Settings":{
		"set":"Set",
		"ok":"Ok",
		"cancel":"Cancel",
		"languageSelect":"Language Select"
	}
} 

    The content of the two documents is best one-to-one correspondence, although in theory only the content on both sides can be matched.

    Next, how to introduce vue-i18n on the page, we need to add i18n object to the vue mount object. Here takes the ordinary vue project as an example. In the main.js file, we import i18n by importing Vue-I18n from 'vue-i18n'. Then we need to use Vue.use (Vue-I18n) to indicate in the vue project To use i18n, then we need to import the internationalization file we configured earlier, and finally add it to the vue mount point, the code is as follows:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

    It should be noted here that our default language is Chinese, so we need to set i18n.locale = 'zh'. In this way, we have already made preparations. The rest is how to use multiple languages ​​in the page. Generally, in the HTML element tag body, you need to add braces {{}}, and then use $ t ( 'Settings.set'), in the javascript code, we don't need curly braces, just $ t ("Settings.set").

    We have added a page to set the language, the content is as follows: 

    Settings.vue

<template>
  <div class="setting">
    <h2>{{$t('Settings.languageSelect')}}</h2>
    <button @click="changeZh">中文</button>
    <button @click="changeEn">English</button>
  </div>
</template>
<script>
export default {
  name: 'Settings',
  data () {
    return {}
  },
  methods: {
    changeZh () {
      this.$i18n.locale = 'zh'
    },
    changeEn () {
      this.$i18n.locale = 'en'
    }
  }
}
</script>

    The language setting page is very simple, there are two buttons, click on them to switch the language, here to switch the language is to modify the value of i18n.locale, as mentioned earlier, the default is' zh ', if it is changed to English it is' en '. When the language is changed, the content of the page will change. Let's take a look at the effect of actual operation:

     

    vue-i18n multi-language, in fact, mainly focus on two places, one is in the body of HTML tags, how to use {{$ t ('Settings.set')}}, and the other is how to use direct $ t ('in javascript code Settings.set '). The difference between them is the double braces {{}} in the label body.