vue -- 项目打包移除console.log和debugger

Kingsaj

于 2022-02-09 11:42:52 发布

阅读量2.1k

点赞数

分类专栏：项目实操文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/weixin_44412840/article/details/122838802

版权

项目实操专栏收录该内容

199 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了如何在Vue项目打包时移除console.log和debugger语句，通过使用uglifyjs-webpack-plugin插件进行配置。在项目根目录下创建配置文件，并根据项目需求设置删除规则。配置完成后，仅在production环境中生效，确保部署的代码无调试痕迹。需要注意的是，该插件只支持ES5语法，包含ES6特性可能会导致错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【vue深入】项目打包之后，移除console.log和debugger

console.log和 debugger

随着项目开发完成，步入稳步运行的阶段，就是部署到生产环境。这个时候，我们就不需要再进行调试什么的了，那么我们需要移除掉console.log和debugger

uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev
或
yarn add uglifyjs-webpack-plugin -D

在项目根目录下创建vue.config.js:

首先头部引入

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

解释下为什么引入terser-webpack-plugin的时候不要安装terser-we

了解本专栏

超级会员免费看