在vue2+element-ui中实现国际化

最近入职一家新公司，项目有国际化的需求，也是大概研究了一下在项目中如何实现国际化。总结如下：

安装Vue I18n

npm install vue-i18或yarn install vue-i18n

在项目的src目录下创建一个lang的文件夹

index.js

import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './en'
import zh from './zh'

Vue.use(VueI18n)

const messages = {
	en: {
		message: 'hello',
		...en,
		...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
	},
	zh: {
		message: '你好',
		...zh,
		...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
	}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
	locale: 'en', // set locale
	messages // set locale messages
})

Vue.use(Element, {
	i18n: (key, value) => i18n.t(key, value)
})

export default i18n

en.js文件配置的是英文的对应的文字

export default {
	router: {},
	table: {
		name: 'name',
		date: 'date',
		address: 'address'
	},
	select: {},
	options: {
		option: '{label}'
	}
}

zh.js中配置的是对应的中文

export default {
	router: {},
	table: {
		name: '姓名',
		date: '日期',
		address: '地址'
	},
	select: {},
	options: {
		option: '{label}'
	}
}

在main.js中引入导入的i18n实例

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

import i18n from './lang/index'

Vue.use(ElementUI)

Vue.config.productionTip = false

Vue.prototype.$tt = function(chinese = '', english = '') {
	return this.$t('options.option', { label: this.$i18n.locale == 'zh' ? chinese : english })
}

Vue.prototype.$ttt = function({ label, labelEN }) {
	return this.$tt(label, labelEN)
}

new Vue({
	router,
	i18n,
	render: h => h(App)
}).$mount('#app')

这样子基本配置完成了，中英文的切换可以在调用方法去修改i18n.locale

methods:{
	switchLanguage(){
    	this.$i18n.locale=this.$i18n.locale ==='zh'?'en':'zh'
    }
}

项目中组件中可以使用$t方法实现国际化。

<el-button>$t{message}</el-button>

上面的lang中配置了message

const messages = {
	en: {
		message: 'hello',
		...en,
		...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
	},
	zh: {
		message: '你好',
		...zh,
		...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
	}
}

有时候我们需要动态的设置中英文

<el-select v-model="value" placeholder="请选择语言">
						<el-option v-for="item in lang" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

假如lang是后台返回的一个数据

lang: [
				{ value: "zh", label: "中文", labelEN: "Chinese" },
				{ value: "en", label: "英文", labelEN: "English" }
			],

这个时候我们要在切换的语言的时候自动响应语言的变化，vue-i18n中提供了具名格式化的方法

en.js和zh.js


options: {
		option: '{label}'
	}

vue模版

<p>{{ $t('options.option', { label: i18n.locale === 'zh'?lang.label:lang,labelEN }) }}</p>

这样子用起来不要太方便，我们可以实现两个方法在main.js中

Vue.prototype.$tt = function(chinese = '', english = '') {
	return this.$t('options.option', { label: this.$i18n.locale == 'zh' ? chinese : english })
}

Vue.prototype.$ttt = function({ label, labelEN }) {
	return this.$tt(label, labelEN)
}

这样子我们可以在组件中调用

<el-select v-model="value" placeholder="请选择语言">
						<el-option v-for="item in lang" :key="item.value" :label="$ttt(item)" :value="item.value"></el-option>
</el-select>

为了让 $ttt方法更好用，我们可以和后段约定返回的字段中文必须位label,英文必须为labelEN，同时我们自己可以对返回的数据做一层转化，将对应的key转成label和labelEN,或者我们在$ ttt()加入更多的key.

Vue.prototype.$ttt = function({ label,item, labelEN,itemEN }) {
	return this.$tt(label||item, labelEN||itemEN)
}