Vue打包移除console.log打印配置_vue取出log的配置-优快云博客

本文链接：https://blog.youkuaiyun.com/xiongmi_Lin/article/details/122324914

本文介绍了在vue-cli4.x和webpack3.x环境下，如何通过babel-plugin-transform-remove-console和uglifyjs-webpack-plugin插件移除console.log。在vue-cli项目中，需安装插件并配置babel.config.js；在webpack项目中，安装插件后更新webpack.prod.conf.js。

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

方案一：采用插件 babel-plugin-transform-remove-console 配置

说明：适用于 vue-cli4.x 版本的脚手架工具
步骤：
1. 执行 npm install babel-plugin-transform-remove-console --save-dev
2. 在 babel.config.js 中添加以下代码：
-------------------------------------------------------------------------
const prodPlugins = []
if (process.env.NODE_ENV === 'production') { // 如果是发布模式则启用的插件
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ...prodPlugins
  ]
}
-------------------------------------------------------------------------

方案二：采用插件 uglifyjs-webpack-plugin 配置

说明：适用于 webpack3.x 版本
步骤：
1. 安装 uglifyjs-webpack-plugin 插件（最好查看下当前项目是否使用了该插件，避免重复安装）
npm install uglifyjs-webpack-plugin -D
2. 编辑build/webpack.prod.conf.js 文件
-------------------------------------------------------------------------
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
......
plugins: [
    ......
	new UglifyJsPlugin({
        uglifyOptions: {
            compress: {
                warnings: false,
                drop_console: true,  // 移除console
                pure_funcs:['console.log']  // 移除console
		    }
	    },
	    sourceMap: config.build.productionSourceMap,
	    parallel: true
	}),
	......
]
......
-------------------------------------------------------------------------