网上找了很多vue-cli 3.x的配置，很多已经不适用了，把采坑的经历记录下来，供参考。
一、使用 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
- 参考 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
三、使用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',
}
]
]
}
总结该方案成功了