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

我是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 : {}
  },
  ...
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容