通过CDN引入ant-design-vue
vue.config.js的配置，如果没有该文件，请在项目根目录创建
// vue.config.js
const isProd = process.env.NODE_ENV === 'production'
const needCdn = isProd
// cdn 外部扩展，通过 cdn 引入，不会被webpack打包
const assetsCDN = {
// 模块名称和模块作用域命名（对应window里面挂载的变量名称）
externals: {
moment: 'moment',
'ant-design-vue': 'antd'
},
// cdn的css链接
css: [
'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css'
],
// cdn的js链接
js: [
'https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js', // 必须先引入moment，否则报错“TypeError: Cannot read property 'default' of undefined”
'https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js', // 需同步引入语言包，否则日期选择控件等将默认显示为英文
'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js'
]
}
// https://cli.vuejs.org/config/#vue-config-js
module.exports = {
configureWebpack: (config) => {
// Ignore related resources when building with cdn
config.externals = needCdn ? assetsCDN.externals : {}
},
chainWebpack: (config) => {
// 初始化页面的title为配置文件设置的值，public/index.html中的htmlWebpackPlugin.options.title
config.plugin('html').tap((args) => {
if (needCdn) {
args[0].cdn = assetsCDN
}
return args
})
}
}
坑点：
-
如果单纯引入了
ant-design-vue，没有引入moment，则在页面中使用a-locale-provider组件时报错“TypeError: Cannot read property 'default' of undefined”
image.png -
需要同步引入
moment的中文语言包，否则使用日期控件等依赖于moment的组件将会显示成英文。
image.png
