Nuxt 应用程序中的 jsplumb 抛出文档未定义

Question

我打算在我的应用中使用 jsplumb

我当前的代码是这样的

<template>
  <client-only>
    <div id="canvas"></div>
  </client-only>
</template>

<script>
import { jsPlumb } from 'jsplumb'

export default {
  name: 'JsPlumb',
  auth: false,
  mounted() {
    jsPlumb.ready(function () {})
  }
}
</script>

当我运行我的应用程序时，这会引发 document is not defined 错误。我已经发现 jsplumb 不能在 SSR 上工作。我怎样才能实现它来使用 jsplumb 的导入，它不会引发错误。 nuxt中是否有动态导入只导入非ssr中的库？

Answer 1

如果其他人即使在process.client 无法工作之后尝试，请尝试process.browser，因为我猜客户端已更改。最好的方法是做console.log(process) 并检查其中存在的变量并根据它做出决定。

<script>
  console.log(process)
  console.log(process.browser)
</script>

Answer 2

与此处完全相同的问题：https://stackoverflow.com/a/67751550/8816585

<script>
import { jsPlumb } from 'jsplumb' // client-side library only, no SSR support

export default {
  mounted() {
    if (process.client) {
      // your JS code here like >> jsPlumb.ready(function () {})
    }
  },
}
</script>

我已经在那里编辑了答案以获得所有需要的详细信息。