Fork me on GitHub

vue反编译

字数统计: 473字   |   阅读时长≈ 1分

最近遇到一个需求，将一个打包的vue项目反编译回源代码模式。以下就是探索过程

使用 vue反编译库 reverse-sourcemap

1
npm install --global reverse-sourcemap

使用方式

将源码映射文件 xxx.js.map 编译到 src目录

1
reverse-sourcemap --output-dir src xxx.js.map

image-20230811163011325

1、执行反编译

执行反编译的前提：打包文件有 映射的 map 文件

如上面的打包文件有5个map文件 我们需要执行5次 命令，都解压到src文件夹，结果如下图所示：

image-20230811163434584

此时反编译结果就出现了项目的目录及文件信息，展开的 src 目录就是我们需要的。（其中的public 是自己建的,不要管）

2、获取package.json

此时我们需要反编译生成 package.json，到 node_modules 目录下，执行

1
npm shrinkwrap

得到 npm-shrinkwrap.json 文件

这个json文件有所有依赖信息，但是没有版本（版本信息取node_modules 目录下查看依赖信息）。那我们怎么还原package.json 呢？

我的办法是拉取一个完整vue-cli项目,或vite项目，看你反编译项目的的vue版本而定（2版本就vue-cli,3就vite）,然后把脚手架项目的package.json拿来，基础依赖就有了，只要把第三方的包添加进去就行了。

3、补全静态文件及相关文件

这就是为啥前面自建了 public 文件夹，里边就是 index.html(用脚手架里的，然后对照反编译的文件看要不要修改（一般不需要)，补全后大致如下

image-20230812095910538

4、最后

就是执行脚手架运行命令如：

1
yarn serve

可能会出现依赖缺失，静态文件确实等问题，需要自己还原或配置 vue.config.js.项目越复杂配置问题越多。解决完后就大功告成

参考链接

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。