VUE3+ant-design-vue第3版，配置国际化语言支持。

此处国际化选择采用i18n，VUE3必须使用vue-i18n@next安装。

antd在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库。所以在国际化时，还要同时完成antd和dayjs的国际化处理。

cd dvtop-designer
npm install vue-i18n@next --save
npm install dayjs --save

创建语言文件，如zh_cn.ts，类似方法创建zh_tw.ts、en_gb.ts等。

module.exports = {
  lang: {
    code: "zh_cn",
    title: "简体中文"
  },
  message: {
    pages: {
      test: "123简体中文",
    },
    components: {
    },
  }
}

创建语言包locale/index.ts，与antd和dayjs语言对应，各方命名不太一样。

//国际化时，需要将所有组件的语言都处理
module.exports = {
  'zh_cn':{
    dvtop: require('./zh_cn'),
    antd: require('ant-design-vue/es/locale/zh_CN').default,
    dayjs: require('dayjs/locale/zh-cn')
  },
  'zh_tw':{
    dvtop: require('./zh_tw'),
    antd: require('ant-design-vue/es/locale/zh_TW').default,
    dayjs: require('dayjs/locale/zh-tw')
  },
  'en_gb':{
    dvtop: require('./en_gb'),
    antd: require('ant-design-vue/es/locale/en_GB').default,
    dayjs: require('dayjs/locale/en-gb')
  }
};

创建i18n.ts工具包。

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
const messages = require('../locale');
declare const navigator: any;

//安装国际化
const install = function(app: any){
  //构建语言包
  const langNames: any = []; //可用语言  
  const dvtopMessages: any = {}; //平台语言包 
  const thirdMessages: any = { //antd和dayjs语言包
    antd: {},
    dayjs: {}
  };
  for( const lcode in messages){
    langNames.push( messages[ lcode].dvtop.lang);
    dvtopMessages[ lcode] = messages[ lcode].dvtop.message;
    thirdMessages.antd[ lcode] = messages[ lcode].antd;
    thirdMessages.dayjs[ lcode] = messages[ lcode].dayjs;
  }

  //从缓存获取语言
  let code = localStorage.getItem("dvtopUserLang") || "";
  if( !code){
    //如果code为空，从浏览器语言获取
    const bLang = (navigator.language || navigator.browserLanguage || "").toLowerCase();
    if( bLang.indexOf('tw')!=-1 || bLang.indexOf('hk')!=-1) code="zh_tw";
    else if( bLang.indexOf('zh')!=-1) code="zn_cn";
    else code="en_gb";
  }
  if( langNames.findIndex((l: any)=>l.code==code)==-1){
    //设置的语言不在语言包内，使用默认
    code = langNames[ 0].code;
  }

  //更换系统语言
  app.config.globalProperties.$lang = {
    third: thirdMessages,
    names: langNames
  };
  
  console.log('i18n', code, langNames, dvtopMessages, thirdMessages);
  //安装i18n
  const i18n = createI18n({
    fallbackLocale: 'zn_cn',
    globalInjection: true,
    legacy: false,
    locale: code,
    messages: dvtopMessages,
  });
  app.use( i18n);
};

export default {
  install
};

在main.ts中安装i18n。

//国际化
import i18n from '@/assets/utils/i18n';
i18n.install( app);

在App.vue中watch语言更改，及时更新antd和dayjs语言，并将用户选择写入localStorage。

  watch: {
    "$i18n.locale": {
      //观察用户语言变量，更新第三方语言
      handler(language: string) {
        if( !language) return;
        
        //切换dayjs语言，antd时间库
        dayjs.locale( this.$lang.third.dayjs[language]);
        //切换antd语言
        this.localeAntd = this.$lang.third.antd[language];
        
        //存储到本地存储
        localStorage.setItem("dvtopUserLang", language);
      },
      immediate: true
    },
  },

在页面中使用代码示例。

    <a-button type="primary" 
        v-for="(item) in $lang.names" :key="item.code" 
        @click="tapChangeLang(item.code)">
      {{item.title}}
    </a-button>
  
    <h1>{{ $t('pages.test') }}</h1>
    <a-date-picker v-model:value="value1" />

  data() {
    return {
      value1: "",
    };
  },
  methods:{
    tapChangeLang( code: string){
      this.$i18n.locale = code;
    }
  }

运行如下代码，在浏览器中打开http://127.0.0.1:8080/即可访问。

cd dvtop-designer 
npm run serve

i18n国际化有很多用法，具体参考官方文档。Vue I18nVue I18n is internationalization plugin for Vue.jshttps://kazupon.github.io/vue-i18n/

标签：vue,zh,dayjs,locale,ant,code,design,i18n,antd
来源： https://blog.csdn.net/DVTOP/article/details/121226306