ant-design国际化扩展新语言

ant-design国际化目前支持66中语言。

如果刚好要用的语言它不存在，我们可以参考node_modules中的语言自己写一套组件的翻译。

下面以缅甸语为例子。

引入vue-i18n：npm install vue-i18n

main.js

import i18n from './common/lang' //i18n
createApp(App).use(i18n).mount('#app')

App.vue

<template>
  <a-config-provider :locale="locale" v-if="isRefresh">
    <router-view />
  </a-config-provider>
</template>
<script>
import ant_lang from "@/common/lang/ant_lang_file";
export default {
  data() {
    return {
      isRefresh: true,//用于刷新
      locale: "",//ant-design国际化
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  computed: {},
  created() {
    this.getLocale();
  },
  methods: {
    reload() {
      this.getLocale();
      this.isRefresh = false;
      this.$nextTick(() => {
        this.isRefresh = true;
      });
    },
    //获取缓存的语言类型
    getLocale() {
      let lang = ant_lang[localStorage.getItem("language")] || ant_lang["zh-CN"];
      this.locale = lang;
    },
  },
};
</script>

 创建语言工具包

 index.js用于翻译业务上的语言

// index.js
import { createI18n } from 'vue-i18n'
import enLocale from './en_US'
import zhLocale from './zh_CN'
import thLocale from './th_TH'
import myLocale from './my_MM'
 
const messages = {
  "en-US": {
    ...enLocale
  },
  "zh-CN": {
    ...zhLocale
  },
  "th-TH": {
    ...thLocale
  },
  "my-MM": {
    ...myLocale
  }
}
 
const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: localStorage.getItem('language') || 'zh-CN',
  messages: messages,
});
export default i18n

zh_CN.json为例其他几个JSON语言包都是map对象只是翻译的语言不同

 ant_lang_file.js用于翻译ant_design组件的文件，因为缅甸语ant_design组件也不支持，所以得自己跟着node_modules的来写一套缅甸语的组件翻译。

import antEnLocale from 'ant-design-vue/es/locale/en_US'
import antZhLocale from 'ant-design-vue/es/locale/zh_CN'
import antThLocale from 'ant-design-vue/es/locale/th_TH'
import antMyLocale from './ant_exten_lang/es/local/my_MM'
export default {
    "en-US": antEnLocale, //英语
    "zh-CN": antZhLocale, //泰语
    "th-TH": antThLocale, //中文
    "my-MM": antMyLocale, //缅甸语言
}

以中文为准，从node_modules\ant-design-vue\es\locale目录下copy一套中文的改成缅甸语就可以了，路径都改成自己的。

 node_modules\ant-design-vue\es\locale\zh_CN.js

 copy的zh_CN改成了my_MM缅甸语

 弄完这些文件后就OK可以使用了

 效果图：