Vue 2生产环境保留debugger语句以检测开发者工具开启

方法一：完善TerserPlugin配置 #

你之前的配置存在语法不完整的问题，且未正确覆盖Vue CLI默认的压缩规则。完整的vue.config.js配置如下：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_debugger: false // 禁止移除debugger语句
            }
          }
        })
      ]
    }
  }
};

如果项目未安装terser-webpack-plugin，先执行安装命令：

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

方法二：用动态执行绕过代码压缩 #

若上述配置仍不生效，可以将debugger改为动态执行形式，让压缩工具无法识别并移除：

const minimalUserResponseInMilliseconds = 100;
const before = Date.now();
eval('debugger'); // 用eval包裹避免被压缩工具移除
const after = Date.now();
if (after - before > minimalUserResponseInMilliseconds) {
  // 执行你的检测逻辑
}

方法三：通过chainWebpack修改默认配置 #

更贴合Vue CLI的配置方式是直接修改默认的Terser规则，无需重新实例化插件：

module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_debugger = false;
      return args;
    });
  }
};

这种方式会直接覆盖Vue CLI内置的压缩配置，避免插件实例冲突问题。

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