当前位置:网站首页 > Vue.js开发 > 正文

dist反编译 vue(webpack打包vue反编译)



最近由于公司老项目上的问题,由于项目很老,之前交接的源码包中缺少了很大一部分模块,但是现在线上的环境和dist包是正常运行的,领导希望能够手动将这部分补全,由于前期项目的不规范,缺少接口文档以及原型图,因此无法知道到底该如何补全,因此,我想着能不能通过dist包去反编译源码包呢,经过多方面探索发现是可行的,但是只能编译出vue文件,但是也满足基本需要了。

1.首先需要在管理员模式下打开cmd

2.找到需要编译的dist/static/js的目录下 执行完成后在该目录会看到目录下存在下面的文件名:0.7ab7d1434ffcc747c1ca.js.map,这里以0.7ab7d1434ffcc747c1ca.js.map为例,如下图:

image.png

3.全局安装reverse-sourcemap资源

npm install --global reverse-sourcemap

4.反编译 执行:reverse-sourcemap --output-dir source 0.7ab7d1434ffcc747c1ca.js.map

上面的方式执行完毕,确实在source中会出现源码,那么有没有可能用脚本去执行呢,通过node的child_process模块中的exec方式便可以执行reverse-sourcemap --output-dir source这个命令,那么只需要拿到当前文件夹中包含.map文件即可,那么可以借助node中fs模块,递归读取文件名,并使用正则将所有.map的文件提取出来放在一个集合或数组中,在对数组进行递归循环执行reverse-sourcemap --output-dir source这个命令

 
 
 

image.png

image.png

到此这篇dist反编译 vue(webpack打包vue反编译)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue2生命周期有几个(vue2的生命周期)2025-03-12 18:00:04
  • npm安装nodemodules(npm安装vue)2025-03-12 18:00:04
  • vue钩子函数和生命周期(vue的钩子函数和生命周期详解)2025-03-12 18:00:04
  • redhat6.10安装教程(redhat6.8安装教程)2025-03-12 18:00:04
  • vue2父子组件传值props(vue父子组件传值emit)2025-03-12 18:00:04
  • vue2和vue3区别(vue2和vue3区别面试题)2025-03-12 18:00:04
  • redhat安装步骤(安装redhat6.5)2025-03-12 18:00:04
  • vue的路由守卫有哪些钩子函数(vue的路由守卫有什么应用场景)2025-03-12 18:00:04
  • oran系统(oran 7.2)2025-03-12 18:00:04
  • vue插槽使用(vue3插槽)2025-03-12 18:00:04
  • 全屏图片