Vue.js Vite JS/Vue 3/SSR:ReferenceError窗口未定义

我将Vite JS与Vue 3一起用于具有服务器端渲染的单页应用程序

我知道只能在客户端执行的JS必须在客户端执行，但有可能在包中执行吗

我的情况是，我希望能够使用Headless UI（用于Tailwind UI），只要该应用程序作为单页应用程序启动，它就可以正常工作。使用SSR启动时，会出现以下错误：

[Vue warn]: Unhandled error during execution of setup function


at <Dialog as="div" static="" class="fixed z-10 inset-0 overflow-y-auto"  ... >
ReferenceError: window is not defined
    at useWindowEvent (C:\test\node_modules\.pnpm\@headlessui+vue@1.2.0_vue@3.0.11\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:408:3)
    at useFocusTrap (C:\test\node_modules\.pnpm\@headlessui+vue@1.2.0_vue@3.0.11\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:486:3)
    at setup (C:\test\node_modules\.pnpm\@headlessui+vue@1.2.0_vue@3.0.11\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:1052:5)
    at callWithErrorHandling (C:\test\node_modules\.pnpm\@vue+runtime-core@3.0.11\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:22)
    at setupStatefulComponent (C:\test\node_modules\.pnpm\@vue+runtime-core@3.0.11\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6488:29)
    at setupComponent (C:\test\node_modules\.pnpm\@vue+runtime-core@3.0.11\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6449:11)
    at renderComponentVNode (C:\test\node_modules\.pnpm\@vue+server-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:160:17)
    at renderVNode (C:\test\node_modules\.pnpm\@vue+server-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:263:22)
    at renderComponentSubTree (C:\test\node_modules\.pnpm\@vue+server-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:228:13)
    at renderComponentVNode (C:\test\node_modules\.pnpm\@vue+server-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:173:16)

[Vue warn]：执行设置功能期间未处理的错误
在
ReferenceError:未定义窗口
在useWindowEvent（C:\test\node\u modules\.pnpm\@headlessui+vue@1.2.0_vue@3.0.11\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:408:3）
在useFocusTrap（C:\test\node\u modules\.pnpm\@headlessui+vue@1.2.0_vue@3.0.11\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:486:3）
在设置时（C:\test\node\u modules\.pnpm\@headlessui+vue@1.2.0_vue@3.0.11\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:1052:5）
在调用时处理（C:\test\node\u modules\.pnpm\@vue+运行时-core@3.0.11\node_modules\@vue\runtime core\dist\runtime core.cjs.js:156:22）
在setupStatefulComponent（C:\test\node\u modules\.pnpm\@vue+运行时-core@3.0.11\node_modules\@vue\runtime core\dist\runtime core.cjs.js:6488:29）
在setupComponent（C:\test\node\u modules\.pnpm\@vue+运行时-core@3.0.11\node_modules\@vue\runtime core\dist\runtime core.cjs.js:6449:11）
在renderComponentVNode（C:\test\node\u modules\.pnpm\@vue+服务器-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server renderer\dist\server renderer.cjs.js:160:17）
在renderVNode（C:\test\node\u modules\.pnpm\@vue+服务器-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server renderer\dist\server renderer.cjs.js:263:22）
在renderComponentSubTree（C:\test\node\u modules\.pnpm\@vue+server-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server renderer\dist\server renderer.cjs.js:228:13）
在renderComponentVNode（C:\test\node\u modules\.pnpm\@vue+服务器-renderer@3.0.11_vue@3.0.11\node_modules\@vue\server renderer\dist\server renderer.cjs.js:173:16）

我知道错误是因为服务器端无法访问窗口属性，但这是由包本身设置的

有没有告诉Vite JS SSR不要在该包上执行JS，除非它在客户端

以下是导致错误的vue组件的内容（仅在SSR执行时，对话框来自Headless UI）：

试验
从“vue”导入{ref}
从'@headlessui/vue'导入{Dialog，TransitionRoot}
导出默认值{
组成部分：{
对话
过渡根
},
设置（）{
常数开=参考（真）
返回{
打开
}
},
}

---

PS：如果您需要配置参考，我使用了这个样板项目：

您应该导入并仅在客户端使用该包

对于仅在客户端导入，您可以使用require而不是像这样导入：

let headlessui
if (process.browser) headlessui= require('@headlessui/vue')

然后在模板中，您可以将所有客户端组件放入

标记中：

<client-only>
    <TransitionRoot as="template" :show="open">
        <Dialog as="div" static class="fixed z-10 inset-0 overflow-y-auto" @close="open = false" :open="open">
          <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text- center sm:block sm:p-0">
            TEST
          </div>
        </Dialog>
     </TransitionRoot>
<client-only>

试验

但这意味着我根本无法在SSR上使用这些组件，对吗？比如，我希望它们仍然显示在SSR上，只是不执行JS，除非在客户端？你们不能分离JS和组件的模板。他们一起工作。检查哪些组件仅在客户端可执行，并仅将其置于“仅客户端”标记中。其他组件仍然可以在服务器端渲染

<client-only>
    <TransitionRoot as="template" :show="open">
        <Dialog as="div" static class="fixed z-10 inset-0 overflow-y-auto" @close="open = false" :open="open">
          <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text- center sm:block sm:p-0">
            TEST
          </div>
        </Dialog>
     </TransitionRoot>
<client-only>