vue-cli2.0和vue-cli3.0中当发布到生产环境时禁用console.log

最新推荐文章于 2025-04-24 15:44:20 发布

原创最新推荐文章于 2025-04-24 15:44:20 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #webpack

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文对比了Vue CLI 2.0和3.0中关于生产环境配置的优化方法，包括UglifyJsPlugin在webpack配置中的应用和babel插件transform-remove-console的使用。讲解了如何在不同版本中移除console.log以提升性能。

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

vue-cli2.0中的方法

1.安装插件

npm install uglifyjs-webpack-plugin --save-dev

2.修改webpack.prod.conf.js配置文件

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
plugins: [
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                // include: /\/src/,
                compress: {
                    warnings: false,
                    drop_debugger: true, //自动删除debugger
                    drop_console: true //自动删除console.log
                }
            },
            sourceMap: config.build.productionSourceMap,
            parallel: true
        }),

vue-cli3.0中的方法

1.安装babel插件

cnpm i babel-plugin-transform-remove-console -D

2.修改babel.config.js文件如下

const plugins = ['transform-remove-strict-mode'];
if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_OpenLog == 0) {
  plugins.push('transform-remove-console');
}
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        polyfills: ['es6.promise', 'es6.symbol']
      }
    ]
  ],
  ignore: ['./src/assets/js/mui.js'],
  plugins: plugins
};