Vue 本地运行没事， Build 之后运行发生页面卡死问题，找了一天了，没有查到问题
Jmysy · 2020-11-19 11:29:06 +08:00 · 4542 次点击这是一个创建于 1807 天前的主题，其中的信息可能已经有所发展或是发生改变。
演示地址： http://ant.pearadmin.com
源码位置: https://gitee.com/Jmysy/pear-admin-ant
本地运行没有问题，打包之后会有出现这个问题，也没有报错信息
 |
1
MzM2ODkx 2020-11-19 11:35:41 +08:00
文件太大唠~
|
 |
2
chairuosen 2020-11-19 11:38:51 +08:00
应该是你的 Animation.js 的问题，动画结束了还在一直 requestAnimationFrame 无限调自己。切走了也没注销，再切回来又注册一遍估计就卡死了
|
 |
3
TomVista 2020-11-19 11:59:56 +08:00
我能正常进去啊,大兄弟,你是不是改好了[]( https://imgchr.com/i/DuBYf1)
|
|
4
TomVista 2020-11-19 12:01:03 +08:00
浏览器是 chrome 的 edge,排除下是不是 js 特性带来的
|
 |
6
Jmysy OP @chairuosen 本地为什么没有这个问题
|
|
7
chairuosen 2020-11-19 12:34:03 +08:00
@Jmysy #6 没试
|
 |
8
magicdu 2020-11-19 12:38:14 +08:00
有没有递归的地方卡死了？
|
 |
10
gouflv 2020-11-19 12:43:30 +08:00 via iPhone
Chrome devtool 录制调用栈，找最耗时的
|
 |
11
mxT52CRuqR6o5 2020-11-19 12:46:13 +08:00
js 死循环了，在死循环时在控制台里暂停代码能知道是哪里死循环的
我这边看是一个 traverse 名字的函数，应该是依赖库里的代码，你从这个函数调用栈一层一层往上看有没有你的代码 |
|
12
Jmysy OP @mxT52CRuqR6o5 大佬可否给解决一下，可以请喝咖啡或有偿
|
|
13
Jmysy OP @mxT52CRuqR6o5 这是我 qq 854085467
|
 |
14
xg4 2020-11-19 13:18:22 +08:00
还有个问题
vue-router 使用的 history 模式，但是 nginx 没有配置，刷新页面会请求 nginx 路由（ 404 ），而不是前端路由 |
 |
16
yaphets666 2020-11-19 13:30:12 +08:00
runtime-core.esm-bundler.js:2106 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
先把这个改了试试 |
|
17
Jmysy OP @yaphets666 这个具体是因为什么所产生的警告
|
|
18
yaphets666 2020-11-19 13:34:30 +08:00
@Jmysy window.webkitStorageInfo 这个 API 被废弃了 你全局搜索他 谁引用了他就注释掉 看看还能不能跑起来 能跑起来那就再 build 一次试试
|
|
19
yaphets666 2020-11-19 13:37:59 +08:00
我比较菜啊 楼上其他兄弟说的问题我都没发现 但是只要切菜单就报这个警告 我首先是怀疑这个问题 而且卡住之后浏览器连刷新都刷新不了 我感觉和浏览器 API 有关系
|
|
20
Jmysy OP @yaphets666 这应该是个依赖项，本项目中并没有使用该 API
|
|
21
yaphets666 2020-11-19 14:01:15 +08:00
@Jmysy 你看 gitee 吧 有人给你提 pr 了 你 beforeEach 没调 next()
|
|
22
Jmysy OP @yaphets666 和此处关系不大， 合并测试过了
|
|
23
Jmysy OP 就这么一筹莫展吗 ...
|
 |
24
SmallTeddy 2020-11-19 14:18:30 +08:00
这个很明显就是死循环了 刚刚打开 没点什么呢 页面就挂掉了
|
|
25
yaphets666 2020-11-19 14:24:24 +08:00
完了兄弟 traverse 这个函数是 vue3 的 apiWatch.ts 这个文件的 可能是 vue3 的 bug 吧
|
|
26
yaphets666 2020-11-19 14:30:30 +08:00
https://github.com/vuejs/vue-next/issues/2380 看下这个 issue 说应该就你的这个问题
|
|
27
mxT52CRuqR6o5 2020-11-19 14:43:51 +08:00
我这边看下来
header/index.vue 第 190 行 tab/index.vue 第 106 行 menu/index.vue 第 81 行 都注释掉，build 出来的页面切换路由就不会卡死了，看着像是 vue3 watch router 会有 bug |
|
28
TomVista 2020-11-19 14:57:16 +08:00
|
|
29
Jmysy OP 刚刚被禁言了，因为回复频繁，大家可以到源码地址讨论，也可能和 watch router 的使用方式有关系，但是官方提供了 useRoute() userRouter() 如果源码正确，这样使用是没有问题的，如果说是递归卡死，在本地开发测试的时候就应该体现出来了，不会等到 build 之后
|
|
30
Jmysy OP 尝试使用 watch:{ $route: } 或 import router from "./router/index.js" 方式来替换现有的 useRoute() 与 useRouter() API
|
|
31
Jmysy OP @mxT52CRuqR6o5 接受了你的建议，屏蔽了代码的确如此，现在就是去切换路由的使用方式，看目前哪种方式当前版本适配，useRoute() import router watch:{ $route } 等方式
|
 |
32
sampeng 2020-11-19 19:00:41 +08:00 via iPhone
本地你是不是 localhost 这样去访问？如果是，换成域名…如果不是，看下一楼。一般 js 线上线下执行差异一般就是踩了浏览器在处理 localhost 和域名有不一样的逻辑…
|
|
33
Jmysy OP 多谢各位的帮助，@mxT52CRuqR6o5 老哥点到了我，目前 watch ( route ) 的方式是有问题的，目前更正为 watch( route.fullpath ) 的方式
|
Select Language