美文网首页
vue-i18n 配合 Element 实现国际化

vue-i18n 配合 Element 实现国际化

作者: _旁观者_ | 来源:发表于2019-08-09 16:27 被阅读0次

  • 版本信息
"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' }
        ]
}

大致就这样了


相关文章

网友评论

      本文标题:vue-i18n 配合 Element 实现国际化

      本文链接:https://www.haomeiwen.com/subject/fcphjctx.html