标签：vue zh dayjs locale ant code design i18n antd

此处国际化选择采用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。