vue-cli 3 生产环境去除控制台打印

最新推荐文章于 2025-11-30 04:24:45 发布

原创最新推荐文章于 2025-11-30 04:24:45 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了Vue CLI 3.0中使用terser-webpack-plugin插件进行代码压缩和优化的具体配置方法，包括如何在vue.config.js中配置以移除警告、console.log和debugger语句。

与vue-cli2.0使用了uglifyjs-webpack-plugin插件进行优化配置不同，vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化。

具体配置可以参考node_modules/@vue/cli-service/lib/config/prod.js

在 vue.config.js 中的 configureWebpack 选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置，vue.config.js配置如下：

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
        config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
        config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
    }
  }

ps：

1.terser-webpack-plugin是@vue/cli-service的依赖包之一，所以不需要再次安装；

2.相关代码设置放在配置代码顶部

3.compress相关设置参考：https://github.com/terser/terser#compress-options