ElementUI多语言实现

最新推荐文章于 2024-08-20 18:04:48 发布

@海海人生

最新推荐文章于 2024-08-20 18:04:48 发布

阅读量780

点赞数

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/wuzhanhui0715/article/details/123617327

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1 . 安装包

$ npm i vue-i18n

项目工程下新建js文件

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的包
import Cookie from 'js-cookie' // 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH // 将饿了么的中文语言包引入
    }
  }
})

在main.js中对挂载 i18n的插件，并设置element为当前的语言

// 设置element为当前的语言
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})