Nuxt.js 仅客户端组件答案

【问题标题】：Nuxt.js Client-Side Only ComponentNuxt.js 仅客户端组件
【发布时间】：2021-04-11 15:25:32
【问题描述】：

我在我的 Nuxt.js 项目中使用 plotly.js，但在导入 plotly.js 时，我一直收到错误消息 document not defined。 Nuxt.js 文档没有提供关于如何仅在客户端加载和生成组件的明确说明。

【问题讨论】：

虽然有几个类似的问题，但没有一个给出完整的解决方案，只有拼凑起来才能解决问题的部分。

【解决方案1】：

要解决这个问题，您正在使用的组件必须放在client-only 环境中：

<client-only>
    <component ...></component>
</client-only>

此外，您需要将组件的 .vue 文件存储在 Nuxt.js 自动创建的 components 目录之外的其他位置，因为在构建过程中，Nuxt.js 会自动收集所有这些文件以便捆绑它们，这将为组件内的 plotly.js 调用import。我创建了一个名为components-lazy 的目录并将组件放在那里。

最后，您必须延迟导入页面、布局或父组件中的组件，您打算在其中使用它。我为此任务使用了以下语法：

export default {
    ...
    components: {
        Plotly: () => import('@/components-lazy/Plotly'),
        ...
    }
    ...
}

这将确保此特定组件仅在客户端导入和呈现。

【讨论】：