部署到 netlify 时，脚本在 astro 应用程序中不起作用

Question

我刚刚开始使用 React/html/tailwind 涉足 Astro，虽然我玩得很开心，但当我将 astro 应用程序部署到 netlify 时遇到了问题。

当我使用

npm run start

在本地运行时，一切都运行良好并按我想要的方式显示。另一方面，当我通过 netlify 部署 Web 应用程序时，所有脚本都不起作用。

我尝试将脚本移动到

src

文件夹中的单独文件夹并在代码中引用它们，但这仍然不起作用。当然，我查看了太空人队的文档，一切看起来都很好。就像我说的，我是 astro 新手，所以我可能做错了什么。

这是代码：

<div>
  <button class="relative group" id="drawer-toggle">
    <div
      class="relative flex overflow-hidden items-center justify-center rounded-full w-[50px] h-[50px] transform transition-all bg-slate-700 ring-0 ring-gray-300 hover:ring-8 group-focus:ring-4 ring-opacity-30 duration-200 shadow-md"
    >
      <div
        class="flex flex-col justify-between w-[20px] h-[20px] transform transition-all duration-300 origin-center overflow-hidden"
      >
        <div
          class="bg-white h-[2px] w-7 transform transition-all duration-300 origin-left group-focus:translate-x-10"
        >
        </div>
        <div
          class="bg-white h-[2px] w-7 rounded transform transition-all duration-300 group-focus:translate-x-10 delay-75"
        >
        </div>
        <div
          class="bg-white h-[2px] w-7 transform transition-all duration-300 origin-left group-focus:translate-x-10 delay-150"
        >
        </div>

        <div
          class="absolute items-center justify-between transform transition-all duration-500 top-2.5 -translate-x-10 group-focus:translate-x-0 flex w-0 group-focus:w-12"
        >
          <div
            class="absolute bg-white h-[2px] w-5 transform transition-all duration-500 rotate-0 delay-300 group-focus:rotate-45"
          >
          </div>
          <div
            class="absolute bg-white h-[2px] w-5 transform transition-all duration-500 -rotate-0 delay-300 group-focus:-rotate-45"
          >
          </div>
        </div>
      </div>
    </div>
  </button>
</div>

<!-- <script src="../../scripts/local.ts"></script> -->
<script>
  const drawerToggle = document.getElementById("drawer-toggle");
  const drawer = document.getElementById("drawer");

  drawerToggle?.addEventListener("click", () => {
    console.log("opening drawer");
    drawer?.classList.toggle("translate-x-full");
  });
</script>

Answer 1

我发现：有一个失败的很棒的脚本，显然这导致没有脚本工作。一旦我注释掉该脚本并且控制台中没有更多错误，我就部署了它并且它起作用了！