element-ui项目vue国际化的简单实现

介绍

国际化是指在设计和开发产品、应用或文档内容时，为不同文化、地区或语言的目标受众提供方便的本地化服务。

i18n是 Internationalization 这个英文的简写，国际化的意思，数一数，Internationalization去掉头尾的i和n刚好还剩下18个字符。

vue国际化

element-ui推荐使用vue-i18n实现

1、安装

npm install vue-i18n@8 -S

2、自定义语言包

const en = {
  home: {
    title: 'english title',
    switchLanguage: 'switch to chinese',
  },
};

export default {
  desc: en,
};

const zh = {
  home: {
    title: '中文标题',
    switchLanguage: '切换英语',
  },
};

export default {
  desc: zh,
};

3、实现

import enElement from 'element-ui/lib/locale/lang/en';
import zhElement from 'element-ui/lib/locale/lang/zh-CN';
import zh from '@/common/lang/zh';
import en from '@/common/lang/en';
import locale from 'element-ui/lib/locale';

Vue.use(VueI18n);

const messages = {
  en: {
    ...en,
    ...enElement,
  },
  zh: {
    ...zh,
    ...zhElement,
  },
};

const i18n = new VueI18n({
  messages,
  locale: 'zh',
});
locale.i18n((key: string, value: string) => i18n.t(key, value));

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

4、模板中使用

<template>
  <div class="content-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><i class="el-icon-lx-global"></i>
          {{ $t('desc.home.title')}}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-button
        type="primary"
        @click="$i18n.locale = $i18n.locale === 'zh' ? 'en' : 'zh'"
        >{{ $t("desc.home.switchLanguage") }}</el-button
      >
    </div>
  </div>
</template>

5、实现效果

经验

• 高版本vue-i18n在element-ui的问题

可以降级

npm install vue-i18n@8

• vue2与typescript的支持（扩展组件选项）

import Vue from 'vue';

declare module 'vue/types/options' {
    interface ComponentOptions<V extends Vue> {
        i18n?: any;
    }
}