前端(VUE)打包上线去除console.log解决方案
作者：lnbcj
这篇文章主要介绍了如何在前端项目中使用terser-webpack-plugin插件来删除代码中的console.log语句,以避免在正式环境中输出调试信息,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
前端项目打包上线时经常遇到一个问题，写代码时的console.log忘记删除带到了正式环境，对于正式项目肯定是不友好的。可以直接使用插件“terser-webpack-plugin”来解决
引入
npm install terser-webpack-plugin --save-dev
配置
使用webpack构建的项目
在你的 webpack.config.js 中，配置 terser-webpack-plugin：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 其他配置项...
optimization: {
minimize: true, // 必须开启，否则配置不失效
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
};
使用vue-cli构建的项目
在你的 vue.config.js 中，配置 terser-webpack-plugin：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 其他配置项...
configureWebpack: config => {
// 去除打包后的console.log
let optimization = {
minimize: true, // 必须开启，否则配置不失效
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
],
};
Object.assign(config, {
optimization,
});
},
};总结
到此这篇关于前端(VUE)打包上线去除console.log解决方案的文章就介绍到这了,更多相关VUE打包上线去除console.log内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！