html%3cli%3e加载图片,vue cli 3.x 生产环境去除console采坑记

vue-cli 3.x 移除console总结

使用 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.

配置optimization.minimizer

// 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

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

安装依赖库

$ 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',

}

]

]

}

总结该方案成功了