elementui国际化

最新推荐文章于 2024-05-23 14:04:41 发布

爬行的码农

最新推荐文章于 2024-05-23 14:04:41 发布

阅读量2.1k

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/lyy112987/article/details/123703864

版权

该博客介绍了如何在Vue项目中结合Element-UI库实现国际化(i18n)功能。通过引入vue-i18n和element-ui的英文语言包，并根据sessionStorage中的language设置默认语言，实现了语言的切换。同时，将项目中的语言包与Element的进行合并，确保UI组件和应用文本都能正确显示。

摘要由CSDN通过智能技术生成

import Vue from 'vue'
import App from './App.vue'
import '@/theme/index.scss'

import Element from 'element-ui' //引入elementUI， 安装的是2.×版本
import VueI18n from 'vue-i18n'  //引入 i18n ，安装的是8.×版本
//引入Element的语言包
import enLocale from 'element-ui/lib/locale/lang/en'

Vue.use(VueI18n)

let lang = sessionStorage.getItem('language') || 'en'  //设置lang
const i18n = new VueI18n({
  locale: lang,
  messages: {
    en: Object.assign(require('@/i18n/lang/zh.js'), enLocale), //将我们项目中的语言包与Element的语言包进行合并
  },
})
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value),
})

Vue.config.productionTip = false

new Vue({
  i18n,
  render: (h) => h(App),
}).$mount('#app')