打包配置优化

森林的尽头是阳光2026-01-31 13:50

去除console debugger配置

安装依赖：terser-webpack-plugin

这个报错是 terser-webpack-plugin版本与 Webpack 版本不兼容 导致的（Vue CLI 项目默认用 Webpack 4，但你安装的是适配 Webpack 5 的terser-webpack-plugin 5.x 版本）

步骤 1：卸载高版本的terser-webpack-plugin

先卸载当前不兼容的版本：

javascript 复制代码

npm uninstall terser-webpack-plugin

步骤 2：安装适配 Webpack 4 的版本

Vue CLI（Webpack 4）需要安装terser-webpack-plugin@4.x版本：

javascript 复制代码

npm install terser-webpack-plugin@4.2.3 --save-dev

步骤 3：修改vue.config.js的配置（适配 4.x 版本）

4.x 版本的配置和 5.x 略有不同，需要调整为：

javascript 复制代码

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new (require('terser-webpack-plugin'))({
          terserOptions: {
            compress: {
              drop_console: process.env.NODE_ENV === 'production',// 生产环境移除所有console
              drop_debugger: true,// 始终移除debugger
              pure_funcs: ['console.log', 'console.warn'] // 精准移除指定console方法
            },
            output: {
              comments: false // 注意：4.x版本的注释配置在output里
            }
          },
          extractComments: false // 不将注释提取到单独的文件中
        })
      ]
    }
  },
   // 可选：Vue CLI 特有的配置，进一步优化
  productionSourceMap: false, // 关闭生产环境sourceMap（减少打包体积，同时避免源码暴露）
};