vue-cli 3.x 移除console總結

網上找了不少vue-cli 3.x的配置，不少已經不適用了，把採坑的經歷記錄下來，供參考。

1、使用 uglifyjs-webpack-plugin 插件

配置以下:

// vue.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
    configureWebpack: {
        optimization: {
          minimizer: [
            new UglifyJsPlugin({
              uglifyOptions: {
                compress: {
                  warnings: false,
                  drop_console: true,//console
                  drop_debugger: false,
                  pure_funcs: ['console.log']//移除console
                }
              }
            })
          ]
        }
  },
}

沒成功報錯以下

$ vue-cli-service build

⠋  Building for production...

 ERROR  Failed to compile with 5 errors                                                                                                                                                                                     11:19:57 AM

 error  

static/js/app.2cd76486.js from UglifyJs
Unexpected token: punc «(» [static/js/app.2cd76486.js:1,23125]

 error  

static/js/chunk-66db1624.14c7d3b2.js from UglifyJs
Unexpected token: punc «(» [static/js/chunk-66db1624.14c7d3b2.js:1,733956]

 error  

static/js/exception_403.5d780122.js from UglifyJs
Unexpected token: punc «(» [static/js/exception_403.5d780122.js:1,281]

 error  

static/js/exception_404.3457fc52.js from UglifyJs
Unexpected token: punc «(» [static/js/exception_404.3457fc52.js:1,281]

 error  

static/js/exception_500.94c7c527.js from UglifyJs
Unexpected token: punc «(» [static/js/exception_500.94c7c527.js:1,283]

 ERROR  Build failed with errors.
error Command failed with exit code 1.

2、配置optimization.minimizer

• 參考 vuecli3+webpack4優化實踐（刪除console.log和配置dllPlugin）

// vue.config.js
module.exports = {
    chainWebpack: (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']
        }
    }
}

最終仍是沒有成功，報錯以下：

$ vue-cli-service build

⠋  Building for production... ERROR  TypeError: Cannot read property 'options' of undefined
TypeError: Cannot read property 'options' of undefined

3、使用babel-plugin-transform-remove-console插件

參考 https://forum.vuejs.org/t/remove-console-logs-from-production-buils/39327

# 安裝依賴庫
$ npm install babel-plugin-transform-remove-console --save-dev
# or
$  yarn add babel-plugin-transform-remove-console --dev

【babel.config.js】配置以下

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生產環境移除console
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      '@vue/app', {
        modules: false,
        targets: {
          browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
        },
        useBuiltIns: 'entry',
      }
    ]
  ]
}

總結該方案成功了