使用vue-i18n实现中英文切换（内含动态属性的绑定）

最近做学生管理系统，因为有国外的学生，所以要进行中英文切换，查了查Vue中使用vue-i18n插件能够实现网页的中英文切换，学习内容如下：

一、下载vue-i18n插件

npm install vue-i18n

二、定义中英文文件

中英文文件的格式如下（英文文件中对象的key值与之对应即可）：

三、在main.js文件中引进i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'zn',
    messages: {
        'zh': require('./language/cn'), //自定义的中文文件
        'en': require('./language/en')  //自定义的英文文件
    }
})

四、使用方式

1. 切换中英文

绑定点击事件，切换中英文

this.$i18n.locale = 'en'; //或'cn'

2. 使用方式

<span>{{$t("language.notice")}}</span>

注意，$t()是个函数，"language.notice"是它的参数，是一个字符串，相当于传入了对象的key值。

如果需要动态绑定怎么办呢，比如，我们循环渲染"notice"、"information"等等，不知道"notice"，那怎么办呢，如下段代码所示：

<template v-for='item in arr'>
	<span>{{$t("language." + item)}}</span>
</template>

只需要将参数组合成字符串即可。

五、ElementUI切换中英文

项目中我使用的是ElementUI，所以要同时对ElementUI里面的一些文字进行中英文切换，比如el-table中的“合计”。

1.在main.js中进行如下配置：

import enLocale from 'element-ui/lib/locale/lang/en'   //导入element-ui的英文文件
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'  //导入element-ui的中文文件
const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'zn',
    messages: {
        'zh': {
            ...require('./language/cn'), //将两个对象合并成一个对象
            ...cnLocale
        },
        'en': {
            ...require('./language/en'),
            ...enLocale
        }
    }
})

2.按需引入ElementUI组件

如果是按需引入，则需要在main.js中加入以下代码：

import ElementLocale from 'element-ui/lib/locale'

ElementLocale.i18n((key, value) => i18n.t(key, value))

3.全局引入ElementUI组件

如果是全局引入，则需要在main.js中加入以下代码：

import Element from 'element-ui'
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})