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