创建Nuxt演示项目时触发'touchstart'滚动阻塞事件违规错误

警告说明 #

这是浏览器的性能优化提示：当代码给touchstart这类可能阻塞页面滚动的事件添加非被动监听器时，浏览器无法提前优化滚动逻辑，可能引发滚动卡顿，因此会抛出该提示。

针对Nuxt项目的解决办法 #

• 升级Nuxt及依赖
  低版本Nuxt或其核心依赖（如vue-router）可能存在未使用被动事件监听器的情况，先尝试升级到最新稳定版：

  npm upgrade nuxt
  # 或用yarn
  yarn upgrade nuxt
  

• 全局配置被动事件监听器
  若升级后问题仍存在，可通过Nuxt插件全局处理这类事件：

  1. 在项目plugins目录下创建passive-events.js文件：

     export default () => {
       const originalAddEventListener = EventTarget.prototype.addEventListener;
       EventTarget.prototype.addEventListener = function(type, listener, options) {
         const passiveEvents = ['touchstart', 'touchmove'];
         if (passiveEvents.includes(type) && typeof options !== 'boolean') {
           options = Object.assign({}, options, { passive: true });
         }
         return originalAddEventListener.call(this, type, listener, options);
       };
     };
     

  2. 在nuxt.config.js中注册该插件：

     export default {
       plugins: [
         '~/plugins/passive-events.js'
       ]
     }
     

• 排查第三方依赖
  若项目引入了UI组件库，可能是库内代码存在非被动事件监听器。可暂时移除第三方依赖，确认问题来源后，针对性地向对应库提交issue或查找适配方案。

补充说明 #

该提示不影响项目功能，仅为性能优化建议。若你的项目对移动端滚动性能要求不高，也可选择忽略。

内容的提问来源于stack exchange，提问作者Patient Cat