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、定位问题能力有待加强。