vue2.0 + elementui + i18n:实现多语言功能
首先提前准备几个文件:
1、zh-CN.json
{"user": "用户"
}
2、en-US.json
{"user": "User"
}
3、index.js
import Vue from 'vue'
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-US.json'
import zh from './zh-CN.json'
Vue.use(VueI18n)
const messages = {en: {...en,...enLocale},zh: {...zh,...zhLocale}
}
let language = 'en'
if (localStorage.getItem('userLanguage')) {language = localStorage.getItem('userLanguage')
} else {localStorage.setItem('userLanguage', language)
}export default new VueI18n({locale: language,fallbackLocale: 'en',messages
})
这样中英文配置文件就全了,最后是 main.js,将三个文件放到一个文件夹i18n中
import Vue from 'vue'
import ElementUI from 'element-ui'
import i18n from './i18n/index'
Vue.use(ElementUI, {i18n: (key, value) => i18n.t(key, value)
})
new Vue({i18n,render: h => h(App)
}).$mount('#app')
改变语言的方法
this.$i18n.locale = ‘zh’;