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

最新推荐文章于 2024-08-21 23:06:58 发布

DVTOP

最新推荐文章于 2024-08-21 23:06:58 发布

阅读量2.3k

点赞数

分类专栏： VUE3+ANTDV3前端开发讲解文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/DVTOP/article/details/121226306

版权

该博客介绍了在Vue3项目中结合AntDesign-Vue，如何配置和使用vue-i18n进行国际化处理。包括安装依赖、创建语言文件、设置语言包、在main.ts和App.vue中处理语言切换，以及在页面中应用。教程还提到由于antd使用dayjs，因此也需要处理dayjs的国际化。

摘要由CSDN通过智能技术生成

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