从ant-design-vue pro学习国际化配置

ant-design-vue pro使用的是vue-i18n模块，在实际项目中主要有三块国际化：ant-design-vue控件自带、dayjs（antdv从4.x版本开始使用dayjs而不是moment.js）、自定义的国际化变量，需要将它们集合在一起，更方便管理。

1. 建立一个locale目录，新增index.js

目录结构如下图：

locale目录根部的index.js文件用于集合自定义的国际化变量，将不同语种组合到一起，在这里创建i18n变量，再一起导入main.js中比较方便。

import { createI18n } from 'vue-i18n'

// 引入不同语种
import zhCN from './lang/zh-CN'
import enUS from './lang/en-US'


// 默认语言代码
const defaultLang = 'zh-CN'

// zh-CN和en-US是调用不同语种的索引
const messages = {
  'zh-CN': {
    ...zhCN
  },
  'en-US':{
    ...enUS
  }
}

// 创建i18n对象
const i18n = createI18n({
  silentTranslationWarn: true,
  locale: defaultLang,
  fallbackLocale: defaultLang,
  messages
})


export default i18n

2. 为不同语种建立独立的索引文件

在locale目录下为不同语种建立目录和对应的js文件，以zh-CN为例：

import antdZhCN from 'ant-design-vue/es/locale/zh_CN' // 引入ant-design-vue自带的语言包
// 引入自定义的国际化对象
import page from './zh-CN/page'
import message from './zh-CN/message'
import global from './zh-CN/global'
import alarm from './zh-CN/alarm'
import query from './zh-CN/query'
import neut from './zh-CN/neut'
import echarts from './zh-CN/echarts'


const components = {
  antLocale: antdZhCN,
  dayjsLocaleName: 'zh-cn' // dayjs自带的语言设置
}


export default {
  ...components,
  // 下面是自定义的国际化对象
  ...message,
  ...page,
  ...global,
  ...alarm,
  ...query,
  ...neut,
  ...echarts,
}

国际化变量文件内容形式如下：

export default {
  'app.title': '应用名称',
}

3. 将定义后的i18n在main.js中挂载

import i18n from "@/locales/index";
app.use(i18n);

4. 在App.vue中全局切换国际化

<template>
  <a-config-provider :locale="antLocale">
    <router-view/>
  </a-config-provider>

</template>

切换语言的关键代码：

// 切换自定义的i18n对象
i18n.global.locale = 'zh-CN'
let localeMsg = i18n.global.getLocaleMessage('zh-CN')
// antLocale 负责切换 ant-design 控件中的语言
antLocale.value = localeMsg.antLocale
// 切换dayjs语言，如xx年xx月等
dayjs.locale(localeMsg.dayjsLocaleName)