Bootstrap Studio中JS代码显示异常且VanillaTilt调用destroy报错如何解决

问题原因&修复方案 #

1. 「无法读取destroy属性」报错修复 #

你报错的核心原因是 document.querySelectorAll 返回的是NodeList元素集合，不是单个DOM元素，VanillaTilt的实例是绑定在集合里的每一个单独元素上，而不是直接绑定在NodeList对象上，直接调用col.vanillaTilt.destroy自然找不到对应属性。另外你也没有先判断实例是否存在就直接调用destroy，窗口resize的时候如果实例还没初始化就会触发报错。
修复后的代码如下：

window.addEventListener("resize", colReset);
let col = document.querySelectorAll(".col-xxl-6");

function colReset() {
  const isDesktop = window.matchMedia("(min-width: 992px)").matches;
  if (isDesktop) {
    // 初始化前先销毁已存在的实例，避免重复初始化
    col.forEach(item => {
      if (item.vanillaTilt) item.vanillaTilt.destroy();
    });
    VanillaTilt.init(col, {
      max: 15,
      speed: 400,
      perspective: 750,
      scale: 1.005
    });
  } else {
    // 遍历每个元素销毁，且判断实例存在再操作
    col.forEach(item => {
      if (item.vanillaTilt) item.vanillaTilt.destroy();
    });
  }
}

// 页面加载完成后首次初始化
colReset();

2. JS编写内容和实际生效内容不一致问题 #

这个是Bootstrap Studio的常见问题，按下面的步骤排查即可：

• 先关闭预览页面，清空浏览器缓存后硬刷新重新加载，排除浏览器端旧代码缓存的影响
• 打开Bootstrap Studio的导出设置，关闭「压缩JS」「自动优化JS代码」的选项，部分优化规则会擅自修改代码逻辑
• 删除当前的JS文件，新建一个空白JS文件重新粘贴代码，避免工具内部旧文件的缓存关联

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