我是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 : {}
},
...
}
网友评论