美文网首页
Ant Design Pro Vue 全局国际化-设置中文

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

作者: Coder1024 | 来源:发表于2020-09-25 09:34 被阅读0次

    我是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 : {}
      },
      ...
    }
    

    相关文章

      网友评论

          本文标题:Ant Design Pro Vue 全局国际化-设置中文

          本文链接:https://www.haomeiwen.com/subject/bcwxuktx.html