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

2020-09-25  本文已影响0人  Coder1024

我是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 : {}
  },
  ...
}
上一篇下一篇

猜你喜欢

热点阅读