Element-UI中国际化的实现（自定义语言包）

最新推荐文章于 2024-08-05 22:53:31 发布

leo934392

最新推荐文章于 2024-08-05 22:53:31 发布

阅读量1.3k

点赞数

文章标签： ui vue.js 前端

本文链接：https://blog.csdn.net/leo934/article/details/131353965

版权

文章介绍了如何在Vue项目中结合VueI18n和ElementUI实现国际化，特别是如何导入和定制ElementUI的内置语言包，以及如何添加自定义的语言包内容，同时提到了使用cookies来存储用户语言选择。

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

首先官方文档中是有国际化的方法的，这里主要说一下定制语言的实现

那么主要是看这部分的代码

上述代码是官方的按需导入中定制语言的写法，其中第二个引入的插件DatePicker是element内置的日期选择器，猜测可能是一个演示作用，不需要的化可以自行删除，另外最后一个引入将 ElementLocale 模块从 element-ui 库中导入，可以使用 ElementLocale 对象来操作和配置 Element UI 库的本地化设置，最后一项配置则规定的自定义语言包的写入规范（以键值对的方式写入，页面中可以通过$t('键名')来获取）

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

自定义语言包全局导入详细解析如下：

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import Cookies from 'js-cookie' // 引入cookie包

import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
import customZH from './zh' // 引入自定义中文包
import customEN from './en' // 引入自定义英文包

Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
export default new VueI18n({
  // 指定语言类型
  locale: Cookies.get('language') || 'en', // 从cookie中获取语言类型 获取不到就是英文
  // 准备语法的翻译环境
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN //  将自定义的英文语言包引入
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH //  将自定义的中文语言包引入
    }
  }
})

其中Cookies是储存语言环境的，可以按照自身需求替换成相应的存储方式