五, Vueのvue-cli2和vue-cli3生產環境去掉console.log

在開發環境寫了很多console.log/info/debug,在生產環境需要去掉這些console。如果手動刪除未免也太累了，再說以後想再開發還得重新寫console。webpack提供了刪除console的插件，這裏分兩種：

vue-cli2 生成環境去除console.log

1. 項目build 下面webpack.prod.config.js 文件中:

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console  傳遞true以放棄對控制檯的調用。*功能
          drop_console: true,
          // pure_funces 禁用console.log函數
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
     
    ......
]

注意：搜索plugins 這個下面，UglifyJsPlugin 默認已經安裝了,只需要添加 drop_console: true, pure_funcs: ['console.log']

代碼參照如上即可, 我就是這樣添加的.

vue-cli3 生成環境去除console.log

1. 只有vue.config.js 裏配置.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

configureWebpack: {
        //註釋console
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: false, //註釋console
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            ]
        }

 }

2. 需先安裝 uglifyjs-webpack-plugin 插件

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

注意： npm run build 打包報錯，提示UglifyJs Unexpected token: keyword «const» ......

UglifyJs當前的版本不支持es6的寫法，其中一種解決的辦法就是升級更新UglifyJs的版本

npm i uglifyjs-webpack-plugin@1

如果提示出錯可以改用淘寶鏡像來安裝

cnpm i uglifyjs-webpack-plugin@1

安裝好之後就可以使用npm run build

以上配置就這麼多，如果還有問題，可以加入扣扣羣：316567839