ElementUI（vue-cli-plugin-element）搭配 vue-i18n（vue-cli-plugin-i18n）配置

网上各类教程包括 ElementUI 官网，列的都是直接安装的 vue-i18n ，并没有 vue-cli-plugin-element 搭配 vue-cli-plugin-i18n 这种通过 vue-cli-plugin 插件引入的配置示例。整理出来

1. vue-cli-plugin-i18n 配置

文件：/src/plugins/i18n.js

默认配置文件（我使用的默认 .json 文件管理语言包的方式，而不是 .js 文件）

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};

  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });

  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'zh_CN',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh_CN',
  messages: loadLocaleMessages(),
});

改为

import Vue from 'vue';
import VueI18n from 'vue-i18n';
// 引入 Element 自家的语言包
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};

  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);

    if (matched && matched.length > 1) {
      const locale = matched[1];
      let elementLocale;
			
      // 我本地使用的是 'zh_CN'、'en_US' 的语言包名，而非 Element 自带的 'zh-CN'、'en' 体系，所以这里需要做下麻烦的映射
      if (locale === 'zh_CN') {
        elementLocale = zhLocale;
      } else if (locale === 'en_US') {
        elementLocale = enLocale;
      }
      
      // 通过解构把自己的项目语言包和 ElementUI 的语言包整合在一起
      messages[locale] = {
        ……elementLocale,
        ……locales(key),
      };
    }
  });

  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'zh_CN',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh_CN',
  messages: loadLocaleMessages(),
});

注：关于 zh-CN、zh_CN 不同写法，有不少争论，比如 AntDesign 的国际化配置文档 用的是 zh_CN，这里不再展开。

2. vue 项目全局配置

通过 vue-cli-plugin-element 方式引入的 ElementUI，/src/plugins/element.js文件不需要修改，直接修改 /src/main.js 即可

默认配置：

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
import './plugins/element';
import i18n from './plugins/i18n';

Vue.config.productionTip = false;

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

修改为

import Vue from 'vue';
import ElementLocale from 'element-ui/lib/locale'; // 引入 ElementUI 必须的语言切换依赖
import App from './App';
import router from './router';
import store from './store';
import i18n from './plugins/i18n';
import './plugins/element';

ElementLocale.i18n((key, value) => i18n.t(key, value)); // 设置 ElementUI 的 i18n 选项 

Vue.config.productionTip = false;

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