Vue进阶（幺玖柒）：Vue 项目设置生产环境取消 console、debugger 语句控制台输出_vue2 限制环境 控制台console输出

在 Vue 项目中，你可以使用 UglifyJS 插件和 webpack 配置来取消生产环境中的 console 和 debugger 语句。以下是一个配置示例：

首先，确保你已经安装了 uglifyjs-webpack-plugin：

npm install uglifyjs-webpack-plugin --save-dev

然后，在你的 vue.config.js 文件中添加以下配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
 
module.exports = {
  configureWebpack: config => {
    if (isProduction) {
      // 生产环境的webpack配置
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              // 生产环境禁用console
              drop_console: true,
              // 去除debugger
              drop_debugger: true
            },
            output: {
              comments: false,
            },
          },
          sourceMap: false,
        })
      );
    }
  }
};

这段配置会在你的生产环境构建中启用 UglifyJS 插件，它会移除所有的 console 和 debugger 语句，并且还会移除代码中的注释。确保你在执行构建命令时设置 NODE_ENV 环境变量为 production，例如：

NODE_ENV=production vue-cli-service build

这样，你的 Vue 项目在生产环境构建时就会取消控制台输出。