使用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)
})