vue--项目上线时移除consloe

babel-plugin-transform-remove-console 插件移除console让项目变小一点

第一种方法：

安装npm install babel-plugin-transform-remove-console --save-dev

第二种方法

安装：npm install terser-webpack-plugin --save
在根目录创建 webpack.config.js文件

const TerserPlugin = require('terser_webpack_plugin')
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
        terserOptions: {
            Compress: {
                drop_console: true
            }
        }
    }
}

两种方法的区别

npm run serve 是开发阶段打包、npm run build 是项目上些阶段
babel-plugin-transform-remove-console 插件不管你运行 npm run serve 还是npm run build
他都会吧console 移除

terser-webpack-plugin 只是在上线大包的时候把console移除

因为在开发阶段我们是需要consloe的，怎么使用第一种方法切在开发时不让他把consloe去掉呢？

解决方法：

修改根目录下的babel.config
const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: prodPlugins }
在使用npm run serve 命令时为development

在使用npm run build 命令时为 production

所以就在使用打包命令时判断是development 还是 production 从而进行移除