Vue CLI的vendors配置項(xiàng)是用來對打包代碼進(jìn)行可視化分析的，可以清楚地了解項(xiàng)目中各個依賴庫所占用的空間大小，以便進(jìn)行針對性的優(yōu)化。下面我們來介紹一下如何配置和使用。

首先，在Vue CLI項(xiàng)目的根目錄下創(chuàng)建一個vue.config.js文件，并在里面增加如下代碼：

module.exports = {
configureWebpack: {
plugins: [
new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)({
analyzerMode: 'static'
})
]
}
}

注意：如果在項(xiàng)目中未安裝webpack-bundle-analyzer插件，則需要先進(jìn)行安裝。代碼如下：

npm install webpack-bundle-analyzer --save-dev

配置完成后，在終端中執(zhí)行npm run build命令進(jìn)行打包，則會在dist目錄下生成一個report.html文件，打開該文件即可看到依賴庫的可視化分析結(jié)果。