vue打包后反编译到源代码详细步骤

vue打包后反编译到源代码详细步骤

若仅持有编译后的Vue前端文件，且原始文件夹丢失，还原项目源代码的步骤如下：
使用反编译库 reverse-sourcemap
借助此库，可从.map文件还原编译前的Vue文件。
安装 执行命令，生成对应源文件至src文件夹 在dist/static/js下，找到大量xxxxx.js.map文件。使用Python脚本统一导出。 执行后，获取源代码文件，位于dist/src/static/js/webpack/src（根据原始编译路径）。 删除/static/js下编译过的js文件，保留正常js文件。 还原的node_modules目录位于dist/src/static/js/webpack。调整项目目录结构
复制反编译得到的src、node_modules文件夹，替换原代码目录。 替换static文件夹至原代码static目录。 删除编译后的index.html中引入的css、js代码，检查静态js、css文件，确保未误删。管理依赖包信息
进入备份的反编译node_modules目录。 执行npm shrinkwrap，生成npm-shrinkwrap.json文件。 文件记录项目所用npm包，但不包括版本号和编译库信息。 检查node_modules目录中的库信息，确认重要库如vue、npm的版本号。启动项目
回到构建项目目录。 修改原package.json，保留编译所需库，如本地使用webpack。 根据需求调整本地package.json，执行npm run start。 耐心查找依赖，根据报错提示逐个安装。 查看源代码引入的库，推测内容。生成package.json
项目启动成功后，执行npm shrinkwrap生成新的npm-shrinkwrap.json文件。 对照第3步得到的npm-shrinkwrap.json文件，确认库版本和信息。额外提示
复制项目，删除node_modules，新建目录，执行npm run install后，重新npm run start。 根据报错提示逐个安装依赖库，直至项目启动。 注意，执行npm run start时需删除npm-shrinkwrap.json文件。完成上述步骤后，可成功还原Vue项目源代码。祝您反编译成功！
2024-11-03