vue-i18n 配合 Element 实现国际化

• 版本信息

"element-ui": "^2.8.2",
"vue-i18n": "^6.0.0",

• main.js

import VueI18n from 'vue-i18n'
import messages from './lang'
import locale from 'element-ui/lib/locale'
import localLang from './lang/localLang.js'

// 国际化
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localLang.langNow, // set locale
  messages // set locale messages
})
locale.i18n((key, value) => i18n.t(key, value)) // 重点：为了实现element插件的多语言切换

• 多语言结构目录

  
  多语言结构目录

• 代码

// index.js
import en from './en/index.js'
import zh from './zh/index.js'

export default {
  en: en,
  zh: zh
}

// localLang.js
let langNow
window.localStorage.clear()
if (window.localStorage.getItem('lang')) {
  window.localStorage.getItem('lang')
} else {
  window.localStorage.setItem('lang', 'en')
  langNow = 'en'
}

export default {
  langNow
}

// zh 文件夹 index.js 
import zhLocale from 'element-ui/lib/locale/lang/zh-CN.js'
import a from './a.js'

export default {
  ...a,
  ...zhLocale
}

// zh 文件夹 a.js   这里可以写对应页面的语言
import img1 from '../../assets/login/user2.png'

export default {
  a_message: {
    hello: '你好12'
  },
  imgUrl: {
    img1: img1
  }
}

en文件夹省略， 大致和zh文件夹一样。

• .vue文件的语言引用

// html
  <p>{{ $t('a_message.hello') }}</p>
  <img :src=" $t('imgUrl.img1') " alt="">

// js 
let str = this.$t("message.hello")
rules: {
        name: [
          { required: true, message: str , trigger: 'blur' },
          { min: 1, max: 20, message: str , trigger: 'blur' }
        ]
}

大致就这样了