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