Ant Design Pro Vue 全局国际化-设置中文

最新推荐文章于 2026-07-09 18:43:30 发布

原创最新推荐文章于 2026-07-09 18:43:30 发布 · 5.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

Ant Design Pro

本文介绍如何在Vue项目中使用vue-antd-pro 3.0版本进行全局国际化配置，特别针对日期控件的中文显示调整。通过修改App.vue文件实现语言切换，并确保moment插件版本适配。

我是vue-antd-pro 3.0版本，设置全局国际化包括日期控件，话不多说直接上手操作：

打开src/App.vue，修改script


<script>
import { domTitle, setDocumentTitle } from '@/utils/domUtil'
import { i18nRender } from '@/locales'
// 以下3句作用于日期控件显示中文
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

export default {
  data () {
    return {
    }
  },

  computed: {
    locale () {
      // 只是为了切换语言时，更新标题
      const { title } = this.$route.meta
      title && (setDocumentTitle(`${i18nRender(title)} - ${domTitle}`))

      // 原先的en-US改成zh-CN即可
      return this.$i18n.getLocaleMessage('zh-CN').antLocale
    }
  }
}
</script>

如果日期控件不生效，需要更新moment插件，我是"moment": "^2.27.0"版本，并且需要注意vue.config.js里的vueConfig，注释掉忽略了所有语言版这句话：

const vueConfig = {
  configureWebpack: {
    // webpack plugins
    plugins: [
      // Ignore all locale files of moment.js
      // 干掉下面这句
      // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        APP_VERSION: `"${require('./package.json').version}"`,
        GIT_HASH: JSON.stringify(getGitHash()),
        BUILD_DATE: buildDate
      })
    ],
    // if prod, add externals
    externals: isProd ? assetsCDN.externals : {}
  },
  ...
}