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

エラーメッセージから分かるようにoptions.cdn.cssは遍歴できない

// Vue     index.html    cdn     
// htmlWebpackPlugin.options.cdn.css         
<% for(var css of htmlWebpackPlugin.options.cdn.css) {
      %>
    <link rel="stylesheet" href="" />
<% } %>

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: []
}

この問題はとても簡単で,穴をあけてメモした.