报错:runtime-dom.esm-bundler.js:647 [Violation] Added non-passive event listener to a scroll-blocking

解决方案：安装插件default-passive-events

1、npm i default-passive-events -S
// main.js中加入：
2、import 'default-passive-events'

Chrome 为了优化滚动性能,引入了一个新的规范 - Passive Event Listeners。这个规范要求开发者标记事件监听器是否会调用 preventDefault()。如果监听器不会调用 preventDefault(),那么浏览器就可以进行一些优化,比如提前触发绘制等,从而提高滚动性能。

如果你没有标记,Chrome 就会假设你的监听器可能会调用 preventDefault(),从而无法进行优化。这就导致了你遇到的那个报错。

你采取的解决方案是:

1. 安装 default-passive-events 这个库,它会自动在你监听的所有被动事件(passive events)上标记 passive: true。
2. 在 main.js 中引入该库,使它生效。

这个解决方案可以避免你手动逐个标记passive,同时解决了报错问题,并获得了滚动性能的提升。