V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Jmysy
V2EX  ›  问与答

Vue 本地运行没事, Build 之后运行发生页面卡死问题,找了一天了,没有查到问题

  •  1
     
  •   Jmysy · 2020-11-19 11:29:06 +08:00 · 4107 次点击
    这是一个创建于 1491 天前的主题,其中的信息可能已经有所发展或是发生改变。

    演示地址: http://ant.pearadmin.com

    源码位置: https://gitee.com/Jmysy/pear-admin-ant

    本地运行没有问题,打包之后会有出现这个问题,也没有报错信息

    33 条回复    2020-11-19 20:09:19 +08:00
    iMusic
        1
    iMusic  
       2020-11-19 11:35:41 +08:00
    文件太大唠~
    chairuosen
        2
    chairuosen  
       2020-11-19 11:38:51 +08:00
    应该是你的 Animation.js 的问题,动画结束了还在一直 requestAnimationFrame 无限调自己。切走了也没注销,再切回来又注册一遍估计就卡死了
    TomVista
        3
    TomVista  
       2020-11-19 11:59:56 +08:00
    我能正常进去啊,大兄弟,你是不是改好了[![DuBYf1.png]( https://s3.ax1x.com/2020/11/19/DuBYf1.png)]( https://imgchr.com/i/DuBYf1)
    TomVista
        4
    TomVista  
       2020-11-19 12:01:03 +08:00
    浏览器是 chrome 的 edge,排除下是不是 js 特性带来的
    Jmysy
        5
    Jmysy  
    OP
       2020-11-19 12:07:35 +08:00
    @TomVista 能进去,但是切换菜单会有问题
    Jmysy
        6
    Jmysy  
    OP
       2020-11-19 12:08:06 +08:00
    @chairuosen 本地为什么没有这个问题
    chairuosen
        7
    chairuosen  
       2020-11-19 12:34:03 +08:00
    @Jmysy #6 没试
    magicdu
        8
    magicdu  
       2020-11-19 12:38:14 +08:00
    有没有递归的地方卡死了?
    Jmysy
        9
    Jmysy  
    OP
       2020-11-19 12:42:22 +08:00
    @magicdu 本地没问题测不出来,线上没有错误信息,很难定位
    gouflv
        10
    gouflv  
       2020-11-19 12:43:30 +08:00 via iPhone
    Chrome devtool 录制调用栈,找最耗时的
    mxT52CRuqR6o5
        11
    mxT52CRuqR6o5  
       2020-11-19 12:46:13 +08:00
    js 死循环了,在死循环时在控制台里暂停代码能知道是哪里死循环的
    我这边看是一个 traverse 名字的函数,应该是依赖库里的代码,你从这个函数调用栈一层一层往上看有没有你的代码
    Jmysy
        12
    Jmysy  
    OP
       2020-11-19 12:56:32 +08:00
    @mxT52CRuqR6o5 大佬可否给解决一下,可以请喝咖啡或有偿
    Jmysy
        13
    Jmysy  
    OP
       2020-11-19 12:57:37 +08:00
    @mxT52CRuqR6o5 这是我 qq 854085467
    xg4
        14
    xg4  
       2020-11-19 13:18:22 +08:00
    还有个问题
    vue-router 使用的 history 模式,但是 nginx 没有配置,刷新页面会请求 nginx 路由( 404 ),而不是前端路由
    Jmysy
        15
    Jmysy  
    OP
       2020-11-19 13:26:16 +08:00
    @xg4 这个地方因为测试特意改过
    yaphets666
        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.
    先把这个改了试试
    Jmysy
        17
    Jmysy  
    OP
       2020-11-19 13:33:10 +08:00
    @yaphets666 这个具体是因为什么所产生的警告
    yaphets666
        18
    yaphets666  
       2020-11-19 13:34:30 +08:00
    @Jmysy window.webkitStorageInfo 这个 API 被废弃了 你全局搜索他 谁引用了他就注释掉 看看还能不能跑起来 能跑起来那就再 build 一次试试
    yaphets666
        19
    yaphets666  
       2020-11-19 13:37:59 +08:00
    我比较菜啊 楼上其他兄弟说的问题我都没发现 但是只要切菜单就报这个警告 我首先是怀疑这个问题 而且卡住之后浏览器连刷新都刷新不了 我感觉和浏览器 API 有关系
    Jmysy
        20
    Jmysy  
    OP
       2020-11-19 13:39:46 +08:00
    @yaphets666 这应该是个依赖项,本项目中并没有使用该 API
    yaphets666
        21
    yaphets666  
       2020-11-19 14:01:15 +08:00
    @Jmysy 你看 gitee 吧 有人给你提 pr 了 你 beforeEach 没调 next()
    Jmysy
        22
    Jmysy  
    OP
       2020-11-19 14:04:54 +08:00
    @yaphets666 和此处关系不大, 合并测试过了
    Jmysy
        23
    Jmysy  
    OP
       2020-11-19 14:15:19 +08:00
    就这么一筹莫展吗 ...
    SmallTeddy
        24
    SmallTeddy  
       2020-11-19 14:18:30 +08:00
    这个很明显就是死循环了 刚刚打开 没点什么呢 页面就挂掉了
    yaphets666
        25
    yaphets666  
       2020-11-19 14:24:24 +08:00
    完了兄弟 traverse 这个函数是 vue3 的 apiWatch.ts 这个文件的 可能是 vue3 的 bug 吧
    yaphets666
        26
    yaphets666  
       2020-11-19 14:30:30 +08:00
    https://github.com/vuejs/vue-next/issues/2380 看下这个 issue 说应该就你的这个问题
    mxT52CRuqR6o5
        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
    Jmysy
        29
    Jmysy  
    OP
       2020-11-19 15:18:02 +08:00
    刚刚被禁言了,因为回复频繁,大家可以到源码地址讨论,也可能和 watch router 的使用方式有关系,但是官方提供了 useRoute() userRouter() 如果源码正确,这样使用是没有问题的,如果说是递归卡死,在本地开发测试的时候就应该体现出来了,不会等到 build 之后
    Jmysy
        30
    Jmysy  
    OP
       2020-11-19 15:21:38 +08:00
    尝试使用 watch:{ $route: } 或 import router from "./router/index.js" 方式来替换现有的 useRoute() 与 useRouter() API
    Jmysy
        31
    Jmysy  
    OP
       2020-11-19 15:34:13 +08:00
    @mxT52CRuqR6o5 接受了你的建议,屏蔽了代码的确如此,现在就是去切换路由的使用方式,看目前哪种方式当前版本适配,useRoute() import router watch:{ $route } 等方式
    sampeng
        32
    sampeng  
       2020-11-19 19:00:41 +08:00 via iPhone
    本地你是不是 localhost 这样去访问?如果是,换成域名…如果不是,看下一楼。一般 js 线上线下执行差异一般就是踩了浏览器在处理 localhost 和域名有不一样的逻辑…
    Jmysy
        33
    Jmysy  
    OP
       2020-11-19 20:09:19 +08:00
    多谢各位的帮助,@mxT52CRuqR6o5 老哥点到了我,目前 watch ( route ) 的方式是有问题的,目前更正为 watch( route.fullpath ) 的方式
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2707 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:16 · PVG 23:16 · LAX 07:16 · JFK 10:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.