Nuxt.js 仅客户端组件

Question

我在 Nuxt.js 项目中使用plotly.jsdocument not defined ，当导入plotly.js 时，我不断收到错误，提示。Nuxt.js 文档没有提供有关如何加载组件并仅生成客户端的明确说明。

Answer 1

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

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

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

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

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

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