Ant Design Pro Vue 全局國際化-設(shè)置中文

我是vue-antd-pro 3.0版本,設(shè)置全局國際化包括日期控件,話不多說直接上手操作:

打開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 : {}
  },
  ...
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容