The main js references

Import '@/utils/elementui' // Import elementui components as needed import i18n from '@/lang/index' '#app', i18n, render: h => h(App) })Copy the code

lang/index.js

import Vue from 'vue' import VueI18n from 'vue-i18n' import locale from 'element-ui/lib/locale' import dictObj from './zh' import Cookies from 'js-cookie' import elementEnLocale from 'element-ui/lib/locale/lang/en' import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' Vue.use(VueI18n) const messages = { 'zh': { ... dictObj.zh, ... elementZhLocale }, 'en': { ... dictObj.en, ... elementEnLocale } } const i18n = new VueI18n({ locale: Cookies.get('lang') || 'zh', messages, }) locale.i18n((key, value) => i18n.t(key, value)) export default i18nCopy the code

Because our project is in Chinese and English, we made two languages, and the front and back ends share a core translation file, so we need to clean the core file for use by front-end I18N.

The core files are as follows:

Let the rood = {" version ":" 1.0.1, "" lang_order" : [" option_key ", "useful", "en", "ru"], "dict" : {" userRole ": [[" Super administrator", "Super Administrator ", "Super Administrator "], [" Common User ", "Common User "]], "Account ": [[" user name ", "user name", "Username"], [" user Password ", "user Password", "Password"],]}}Copy the code

For ease of use, the first column of the array is the i18N key value, the second column corresponds to Chinese, the third column corresponds to English, if there are multiple languages, then append the string.

Cleaning code:

import ens from './dictionary/dictionary.json'

let { dict,lang_order } = ens
let dictObj = {}

for (let len in lang_order){
	let lang_ = {}
	if(len == 0) continue
	for(let key in dict){
		let data = {}
		dict[key].forEach(item =>{
			data[item[0]] = item[len]
		})
		lang_[key] = data
	}
	dictObj[lang_order[len]] = lang_
}

export default dictObj
Copy the code

Using the $t

HTML template <div :title="$t('userRole ') Super administrator ')" js template this.$t('userRole '). Super administrator ')Copy the code