Vue TypeError: htmlWebpackPlugin.options.cdn.css is not iterable

如题 根据错误提示可知htmlWebpackPlugin.options.cdn.css不可以遍历

// Vue 项目中 index.html 配置 cdn 样式  
// htmlWebpackPlugin.options.cdn.css 这个没有办法遍历
<% for(var css of htmlWebpackPlugin.options.cdn.css) {
      %>
    <link rel="stylesheet" href="<%=css%>" />
<% } %>

到 vue.config.js 去查找原因

let cdn = {
     }  // 定义的 CDN 配置对象之后导入 index.html
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
     
  externals = {
     
    // key(要排除的包名), value(引入的CDN包的全局变量名)
    vue: 'Vue',
    'element-ui': 'ElementUI',
    xlsx: 'XLSX',
    moment: 'moment'
  }
  // 生产环境添加要用的各种 CDN 依赖包
  cdn = {
     
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js',
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js',
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
    ]
  }
}

// 这里是进行导入的配置, cdn 是之前定义的对象
 chainWebpack(config) {
     
	 config.plugin('html').tap(args => {
     
	    args[0].cdn = cdn // 配置cdn给插件
	    return args
	  })
	}

当在开发环境中

// 这里面的代码是不执行
if (isProduction) {
     
  ....
}
//里面没有 css 与 js 数组导致的问题 所以无法遍历
let cdn = {
     } 
//初始化成空数组问题就没了
let cdn = {
     
  css: [],
  js: []
}

这个问题挺简单的, 掉坑了记一笔