vue3 项目生产环境切换路由卡死问题 【vue bug】

工作那么多年第一次遇到一个问题卡了两天,最后也不是自己解决的。感谢 edison1105大神帮忙解决问题,记录一下,以后还会有人踩坑。

背景


最近用vue3 全家桶写了 后端管理系统。 传送门

  • vue3 + compositionAPI
  • ts
  • vue-router

 

问题


开发很流程,在开发环境运行也很好,部署到服务器的时候报错。

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

在这里插入图片描述

Uncaught (in promise) DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.

在这里插入图片描述

 

分析


看来看去都找不去原因,查看堆栈信息。

首先我调用了router.push 方法,然后vue router 调用了 vue ,最后在traverse函数报错。

在这里插入图片描述
是在解决不了了,感觉像是vue bug 决定提了一个issue。

 

解决


edison1105大神加了微信,协助定位解决。

最后原因由于我 watch(useRoute()) 产生了问题,

错误代码:

watch(useRoute(), current => {

})

我watch 了整个route 对象,route 对象太大了,如果组件内部使用了 window 对象 在 deep watch 的时候 就会出现你遇到的错了

正确写法:

watch(()=>useRoute().xxx,xxx)

watch 想要监听的属性就行,无需整个route watch

我提出的issue ,大神有回复,可以看下。

 

总结:


1、感觉dev环境没有问题,生产环境出错,这种问题vue-router是不是也要背锅

2、自己写代码不仔细,有冗余部分,尽量减少冗余,减少出错。

3、定位问题能力有待加强。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页