[vue 项目] 缺少 package.json 如何才能运行 vue 项目?

2022-06-28 16:44:45 +08:00
 OkabeRintaro
复制了一个项目,但是这个项目并没有 package.json 文件和 vue.config.js 文件,如何才能让他运行起来?是 从网页的 sourcemap 文件扒下来的 想复现下 但是运行不了
2173 次点击
所在节点    前端开发
29 条回复
OkabeRintaro
2022-06-28 17:17:22 +08:00
难道无法补全吗?
node_modules 的文件好像都是有用的
del1214
2022-06-28 17:42:58 +08:00
逆向工程一下
OkabeRintaro
2022-06-28 17:59:32 +08:00
@del1214 我是用了 source detecotor 和 Save All Resources 这两个插件,把源码扒下来了,但是不知道怎么运行,现在 app.vue 啥的都是正常代码,但是缺少 package.json 文件这些玩意,需要什么依赖也不知道。 试过套上一个新创建的 vue 初始项目,还是不行 。。。。。
renmu123
2022-06-28 19:11:18 +08:00
先运行看看,一个一个解决报错
liyang5945
2022-06-28 19:23:57 +08:00
网址发一下,我来试试,我之前扒过一个 react 的项目
jydeng
2022-06-28 19:28:23 +08:00
只能逆向了,尝试从 import 入手
shanyuhai123
2022-06-28 19:47:23 +08:00
如果 package.json 和 vue.config.js 有一堆骚操作的话就很难,看运气了。
flyqie
2022-06-29 08:16:53 +08:00
以前测试过用 sourcemap 逆向 vue 项目。

得出的结论是,这玩意要能跑起来可完全不容易。

假设你拿到的 sourcemap 是完整可用的,那么你会遇到如下问题:

1. 独立的 css/less/sass/scss 文件大概率是不存在的,如果很不幸你遇到了 import 这些文件而不是直接写在 vue 的话,你需要去打包后的 css 里手动提取出来。稍微庆幸的是,除非全局引入,不然每个页面的样式基本都会是同一个 data-v-id 。

2. sourcemap 解包后可能会出现带后缀以及不带后缀的文件,你需要自行挑选出来原始文件,但在我个人经验上,基本都是无后缀的是原始文件。

3. vue.config.js ,起码我没见到过有的,大概率得手动写一下。

4. package.json 是不可能有的,这个你纯粹想多了,真正的难点也在这里,你需要去可能非常不全的 node_modules 目录里手动逐个查依赖,这个过程很费劲,因为有些时候你可能找的一头雾水,这个时候就得试着把项目跑起来按照报错找依赖。

各大打包工具对 sourcemap 都是抱着调试的用途去生成的,根本不可能把开箱即用的项目代码扔进去,找思路可以,原样跑起来非常费劲。
flyqie
2022-06-29 08:26:56 +08:00
对了,还有个问题。

你在 sourcemap 找到的 image 等文件,大概率不是直接可用的。

webpack 什么的会搞个花活,那里面并不直接是文件内容,而是一段 js ,js 里面才会写真实路径。

大文件会指向打包后项目代码的 url(如 images/some_source_name.random_id.ext_name),你得手动下载下来替换。

小文件会直接 base64 编码成 data url ,提取出来替换就可以了。
flyqie
2022-06-29 08:46:11 +08:00
发了上面这些,就想告诉你一件事。

这玩意,如果你 souercemap 和打包后项目文件完整,是可以跑起来的。

但是你要做的事情非常多,时间精力消耗很大。

不是有 sourcemap 就能万事大吉,完整 sourcemap 只是给你个可能性。
OkabeRintaro
2022-06-29 09:43:17 +08:00
OkabeRintaro
2022-06-29 09:44:21 +08:00
@flyqie 太强了,大佬,总结了这么多,你一定是在这方面踩过许多坑(哭)
OkabeRintaro
2022-06-29 10:49:40 +08:00
@liyang5945 期待一下你的
flyqie
2022-06-29 11:33:58 +08:00
@OkabeRintaro

算不上大佬,不过确实踩了不少坑。

有 sourcemap 你要知足,没 sourcemap 我都搞过。

之前闲的没事接了个小的外包单子。

vue + php ,前任跑路了要加功能,连个 sourcemap 也没留下。幸好功能不算复杂(前端没多少代码,主要在后端),照着打包后的 js 文件重写了一遍。

那感觉,生不如死,不过倒也接触到了不少新知识。
OkabeRintaro
2022-06-29 11:52:16 +08:00
@flyqie 唉 有 sourcemap 我都感觉搞不懂,自己代码量太少了,经验不足,有时都不知道他源码为什么要这么写或者直接就遗忘在脑后了
OkabeRintaro
2022-06-29 17:03:44 +08:00
心累,弄了半天还是失败了,有没有高手再指导一下
liyang5945
2022-06-29 21:12:59 +08:00
@OkabeRintaro #13 我大概跑起来了,但是工作量比较大,我只弄了前面几个翻页,需要方法的话我可以教给你,下面是 package.json
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.6.14",
"vue-router": "^3.5.3",
"throttle-debounce": "^5.0.0",
"vue-slider-component": "^3.2.16",
"howler": "^2.2.3",
"moment": "^2.29.3",
"vue-m-message": "3.1.0",
"element-ui": "^2.15.9",
"apollo-client": "2.6.10",
"apollo-link-http": "1.5.17",
"apollo-cache-inmemory": "^1.6.6",
"vue-apollo": "^3.1.0",
"apollo-link": "^1.2.14",
"vue-meta": "^2.4.0",
"axios": "^0.27.2",
"js-sha1": "^0.6.0",
"supports-webp": "^2.0.1",
"twemoji": "^14.0.2",
"whatwg-fetch": "^3.6.2",
"vue-fullscreen": "^2.6.1",
"jquery": "^3.6.0",
"js-cookie": "^3.0.1",
"svgxuse": "^1.2.6",
"vue-qr": "^4.0.9"
},
"devDependencies": {
"@vue/cli-plugin-router": "~4.5.15",
"@vue/cli-plugin-typescript": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
OkabeRintaro
2022-06-30 08:26:13 +08:00
@liyang5945 呜呜大佬 求教方法
OkabeRintaro
2022-06-30 08:27:47 +08:00
@liyang5945 跑起来是怎么样的?我还没见过 好惨 有截图吗
liyang5945
2022-06-30 09:00:36 +08:00
@OkabeRintaro #19 首页正常,然后可以翻个两三页不报错,但是样式错乱

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/862741

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX