vue i18n element 使用

1. 首先下载 i18n包

npm install vue-i18n

2. 在src下创建 lang文件夹，存放语言配置文件（index.js），语言包

2.1 语言配置文件 index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh.js'
import en from './en.js'
import de from './de.js'
//使用vuex
import store from '../store'
// element-ui 组件国际化
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import deLocale from 'element-ui/lib/locale/lang/de'

ElementLocale.i18n((key, value) => i18n.t(key, value))

Vue.use(VueI18n)
const messages = {
  zh: {
    ...zh,
    ...zhLocale
  },
  en: {
    ...en,
    ...enLocale
  },
  de: {
    ...de,
    ...deLocale
  }
}
console.log(store.state.langs)

const i18n = new VueI18n({
  messages,
  locale: store.state.langs, //初始默认中文
  fallbackLocale: 'zh', // 若某个语言环境变量，则使用fallbackLocale环境下对应的变量
  silentFallbackWarn: true, // 抑制警告
  globalInjection: true, // 全局注入
  silentTranslationWarn: true
})

export default i18n

2.2 中文包 zh.js

export default {
  home: {
    aaa: '登录',
    bbb: '用户名',
    ccc: '密码'
  }
}

2.3 英语包 en.js

export default {
  home: {
    aaa: 'log',
    bbb: 'user',
    ccc: 'passwd'
  }
}

2.4 只需要把语言包引入到语言配置文件中

3. 在store中加入 langs: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh',

4. 在main.js 中引入 import i18n from './lang/index'

5. 在页面切换语言