vuecli3代码压缩混淆

最新推荐文章于 2024-10-25 17:26:18 发布

weixin_33834910

最新推荐文章于 2024-10-25 17:26:18 发布

阅读量4.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack 前端 ViewUI

原文链接：http://www.cnblogs.com/shitian-net/p/10955684.html

博主记录了用vuecli3写的代码的混淆流程，包括安装“uglifyjs-webpack-plugin”，在项目根目录创建vue.config.js文件，在其中引入并配置该插件。若打包报错，可能需修改配置中的“minimizer”节点，还给出了官方文档地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近被某大公司大佬虐了，要求混淆用vuecli3写的代码（啥敏感信息都没有，混淆个什么混淆...）

言归正传，现将混淆流程记录如下：

1、安装 “uglifyjs-webpack-plugin”

cnpm i --save uglifyjs-webpack-plugin

没有安装cnpm的同学可以用npm

2、在项目根目录下创建一个名为 vue.config.js的文件

3、在vue.config.js中引入uglifyjs-webpack-plugin

const UglifyPlugin = require('uglifyjs-webpack-plugin')

4、在vue.config.js中配置uglifyjs-webpack-plugin

module.exports = {
  configureWebpack: (config) => {
    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'
    }
  }
};