> 技术文档 > vue2.0 + elementui + i18n:实现多语言功能

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’;