vue-cli4通过cdn引入ant-design-vue并解决

通过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
    })
  }
}

坑点：

1. 如果单纯引入了ant-design-vue，没有引入moment，则在页面中使用a-locale-provider组件时报错“TypeError: Cannot read property 'default' of undefined”
   

   image.png

2. 需要同步引入moment的中文语言包，否则使用日期控件等依赖于moment的组件将会显示成英文。
   

   image.png