Vue 3 CLI中不允许使用stats？如何生成项目报告？

一、修复Vue CLI自带--report参数的报错问题 #

首先确认你使用的是适配Vue 3的Vue CLI版本（要求@vue/cli-service ≥4.5.0，推荐5.x），版本过低先升级：

npm update @vue/cli-service --save-dev

执行正确的构建命令：

vue-cli-service build --report

执行后会在dist目录生成report.html，直接用浏览器打开即可查看包分析报告。

如果依然触发stats错误，排查以下两点：

• 检查vue.config.js中是否自定义了错误的stats配置，比如设置了不存在的参数值。确保stats配置为有效值：

  module.exports = {
    configureWebpack: {
      stats: 'normal' // 可选值：errors-only、minimal、normal、detailed、verbose
    }
  }
  

• 清理依赖缓存后重装：

  rm -rf node_modules package-lock.json
  npm install
  

二、正确配置webpack-bundle-analyzer（避免stats冲突） #

如果自带命令报错，手动配置插件是更可靠的方案：

1. 安装依赖：

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

2. 在vue.config.js中添加配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerMode: 'static', // 生成静态HTML报告，避免启动本地服务的冲突
        reportFilename: 'bundle-report.html', // 自定义报告文件名
        openAnalyzer: false // 关闭自动打开，按需手动查看
      })
    ],
    stats: 'normal' // 显式设置stats规则，避免配置冲突
  }
}

3. 执行构建命令：

vue-cli-service build

报告文件会生成在dist目录下，直接用浏览器打开即可查看完整包映射。

三、排查stats错误的核心原因 #

stats报错大多源于webpack配置冲突：

• 检查是否有第三方插件/loader修改了webpack的stats配置，暂时禁用自定义插件排查问题
• 确保vue.config.js中chainWebpack的配置没有误改stats相关规则，比如避免设置无效的stats参数值

内容的提问来源于stack exchange，提问作者Rutwick Gangurde