当前位置:   article > 正文

vuecli3代码压缩混淆使用uglifyjs压缩JS_使用uglifyjs混淆vue3代码

使用uglifyjs混淆vue3代码

1:第一种方法

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

  1. module.exports = {
  2. configureWebpack: (config) => {
  3. if (process.env.NODE_ENV == 'production') {
  4. // 为生产环境修改配置
  5. config.mode = 'production'
  6. // 将每个依赖包打包成单独的js文件
  7. let optimization = {
  8. minimizer: [new UglifyPlugin({
  9. uglifyOptions: {
  10. warnings: false,
  11. compress: {
  12. drop_console: true,
  13. drop_debugger: false,
  14. pure_funcs: ['console.log']
  15. }
  16. }
  17. })]
  18. }
  19. Object.assign(config, {
  20. optimization
  21. })
  22. } else {
  23. // 为开发环境修改配置
  24. config.mode = 'development'
  25. }
  26. }
  27. };

这就可以了,接下来大家可以打包试试了

cnpm run build

如果报错的话,估计是uglifyjs-webpack-plugin版本又更新了,可能需要修改配置中的 “minimizer”节点,官方文档地址:uglifyjs-webpack-plugin - npm

如有错误,欢迎指出!

2:第二张方法

打包后的代码段:app.js

在这里插入图片描述



找到文件夹 build/webpack.pro.conf.js

  • 在UglifyJsPlugin 插件中39行加入两行代码
  1. drop_console: true,
  2. pure_funcs: [‘console.log’]   去掉注释
  1. new UglifyJsPlugin({
  2. uglifyOptions: {
  3. compress: {
  4. warnings: false,
  5. //drop_console 传递true以放弃对控制台的调用。*功能
  6. drop_console: true,
  7. // pure_funces 禁用console.log函数
  8. pure_funcs: ['console.log']
  9. },
  10. },
  11. sourceMap: config.build.productionSourceMap,
  12. parallel: true
  13. }),

3:第三张方法

  1. 安装node.js
  2. 安装当前应用 -- uglifyjs 

    如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下:

      npm install uglify-js -g

演示如何使用uglifyjs压缩JS

打开一个用于存放JS文件的文件夹,进入到cmd

此时输入命令对app.8d991fddffba99b1a623.js文件进行压缩并输出文件名为app.8d991fddffba99b1a623.min.js的文件:      m是浑浊 o是压缩

uglifyjs app.8d991fddffba99b1a623.js -o app.8d991fddffba99b1a623.min.js 也可以运行如下代码, 测试一下-m参数:
uglifyjs app.8d991fddffba99b1a623.js -m -o app.8d991fddffba99b1a623.min.js

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/656369
推荐阅读
相关标签
  

闽ICP备14008679号