之前有讲到怎么去多环境打包，但是在打包完之后发现一个问题。
不打包map文件吧，那就是真 · 源码；打包吧，map文件里也是什么都有，在一波绝望之后选择加入代码混淆的插件，不求别的，只要我的注释和log不在就行。
接下来就来介绍在Vue-cli3中， uglifyjs-webpack-plugin的使用
话不多说，安装插件先
npm i --save uglifyjs-webpack-plugin
接下来，配置文件还是写在vue.config.js中
configureWebpack: (config) => {
// 引入uglifyjs-webpack-plugin
let UglifyPlugin = require('uglifyjs-webpack-plugin');
if (process.env.NODE_ENV == 'production') {
// 为生产环境修改配置
config.mode = 'production'
// 将每个依赖包打包成单独的js文件
let optimization = {
minimizer: [new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})]
}
Object.assign(config, {
optimization
})
} else {
// 为开发环境修改配置
config.mode = 'development'
}
}
还有一个问题，需要压缩的代码是需要有map文件才可以的哟！
如果是多环境打包的话，.env文件中的NODE_ENV需要固定名称的。
NODE_ENV = 'production'
这个，感觉很投机取巧的一个配置，如果需要名称的话，自己在下面定义字段去保存咯，这里的标识是要作为打包时vue对生产环境的判断。在dev开发环境打包时，vue默认不会打包map文件的。
这个作为一个小小的问题提一下，当然如果哪位大佬有更好的解决方案，可以留在评论区哟。
唔，就是这么简单，引入插件，写上配置，重启项目打包，结束。
配置方式都是来自其他大佬哟，文章都是作为填坑记录来方便使用的，有问题的话，求轻喷ヽ(^_−)ﾉ
