记录vue国际化i18n的使用

    vue框架如果考虑多语言，可以使用vue-i18n，安装的话，直接通过npm install vue-i18n --save将依赖库加入到当前vue项目中。另外，我们需要配置多语言文件，这里以中文和英文为例，我们在assets目录下新建languages目录，然后新建zh.json和en.json，分别用于存放各自语言对应的国际化文件。

    多语言文件既然是json格式，自然可以包含对象，以及对象嵌套，这里我们通过对象属性以及嵌套的方式来组织我们的多语言文件。内容分别如下：

    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"
	}
} 

    两份文件的内容，最好一一对应，虽然理论上只需要两边的内容能够对应上就行。

    接下来，就是在页面上如何引入vue-i18n了，我们需要在vue挂载对象上加入i18n对象。这里以普通的vue项目为例，我们在main.js文件中，通过import Vue-I18n from 'vue-i18n'的方式引入i18n，然后需要通过Vue.use(Vue-I18n)来表示在vue项目中使用i18n，接着需要引入我们前面配置的国际化文件，最后再将其加入vue挂载点上，代码如下所示：

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/>'
})

    这里需要注意，我们默认的语言是中文，所以需要设置i18n.locale='zh'。我们这样，其实就已经做好了准备工作，剩下就是如何在页面中使用多语言了，一般在html元素标签体中，需要加入大括号{{}}，然后在大括号中使用$t('Settings.set')，在javascript代码中，我们不需要大括号了，直接$t("Settings.set")就可以了。

    我们新增一个设置语言的页面，内容如下所示： 

    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>

    语言设置页面很简单，就是两个按钮，点击他们就可以切换语言了，这里切换语言，就是修改i18n.locale的值了，前面提到过，默认是'zh'，如果修改为英文就是'en'。当修改了语言之后，页面内容会发生变化。我们来看看实际运行的效果：

     

    vue-i18n多语言，其实主要关注两个地方，一个是在html标签体内，如何使用{{$t('Settings.set')}}，另外一个就是在javascript代码中如何使用 直接$t('Settings.set')。他们之间的区别就是在标签体内，多了双大括号{{}}。