当前位置：首页 > 前端教程

elementui locale

2026-01-15 20:29:51前端教程

ElementUI 国际化（Locale）配置

ElementUI 提供了多语言支持，通过引入对应的语言包和设置 locale 属性，可以切换组件的显示语言。

安装语言包

ElementUI 默认使用中文，若需切换为其他语言，需安装对应的语言包：

npm install element-ui -S
npm install element-ui/lib/locale/lang/[语言包名称] -S

常见语言包：

elementui locale

en（英文）
zh-CN（简体中文，默认）
zh-TW（繁体中文）
es（西班牙语）
ja（日语）

全局配置国际化

在 Vue 项目的入口文件（如 main.js）中引入 ElementUI 和语言包，并设置 locale：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'; // 切换为英文

Vue.use(ElementUI, { locale });

动态切换语言

若需运行时切换语言，可结合 Vue 的响应式特性动态更新 locale：

elementui locale

import Vue from 'vue';
import ElementUI from 'element-ui';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import enLocale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI);

// 动态切换示例
const app = new Vue({
  el: '#app',
  data() {
    return {
      currentLang: zhLocale
    };
  },
  methods: {
    changeLanguage(lang) {
      if (lang === 'en') {
        this.currentLang = enLocale;
      } else {
        this.currentLang = zhLocale;
      }
      this.$i18n.locale = lang; // 若同时使用 vue-i18n
    }
  }
});

与 vue-i18n 结合

若项目已使用 vue-i18n，可通过以下方式集成：

import Vue from 'vue';
import ElementUI from 'element-ui';
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(VueI18n);
Vue.use(ElementUI);

const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  messages: {
    'zh-CN': { ...zhLocale }, // ElementUI 中文
    'en': { ...enLocale }     // ElementUI 英文
  }
});

new Vue({ i18n }).$mount('#app');

按需加载语言包

若使用按需引入（如 babel-plugin-component），需在组件中单独设置语言：

import { DatePicker } from 'element-ui';
import lang from 'element-ui/lib/locale/lang/en';

// 设置语言
DatePicker.locale(lang);

覆盖默认语言文本

可通过 locale 的 i18n 方法自定义特定组件的文案：

import Vue from 'vue';
import ElementUI from 'element-ui';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

zhLocale.el.pagination = {
  goto: '前往',
  pagesize: '条/页',
  total: `共 {total} 条`,
  pageClassifier: '页'
};

Vue.use(ElementUI, { locale: zhLocale });

通过以上方法，可实现 ElementUI 的国际化适配，满足多语言场景需求。