使用 Nuxt/Vue 加载 D3

我正在尝试在使用 Nuxt 构建的应用程序中实现 D3。我已成功将其导入到视图中<script>部分与import * as d3 from 'd3'但是，由于该应用程序正在服务器端渲染，因此 D3 的功能不起作用（即d3.select(...)）由于缺少浏览器。在里面Nuxt插件文档 https://nuxtjs.org/guide/plugins/#client-side-only它建议了一种仅限客户端的外部插件的模式：

module.exports = {
  plugins: [
    { src: '~plugins/vue-notifications', ssr: false }
  ]
}

我尝试在中实现该模式nuxt.config.js我的项目：

module.exports = {
  head: {
    title: 'My Demo App',
    meta: [...],
    link: [...]
  },

  loading: {...},

  plugins: [
     { src: '~node_modules/d3/build/d3.js', ssr: false}
  ]
}

然而D3抛出了一个ReferenceError在寻找的同时documentNuxt 抛出一个SyntaxError在控制台中指向插件字段中的某些内容nuxt.config.js.

以供参考，demo.vue:

<template>
  <div class="demo-container"></div>
</template>

<script>
  import * as d3 from 'd3';
  d3.select('.demo-container');
</script>

有人能够指出我做错了什么吗？

对于任何来到此页面寻找解决方案的人， 这些建议来自 piyushchauhan2011在 GitHub 上 https://github.com/nuxt/nuxt.js/issues/771让我朝着正确的方向前进。

我需要做的就是：

• 在我的单文件组件中导入 d3，然后
• 仅在以下范围内使用 d3 进行任何 DOM 操作mounted()

在这一切之前，我当然必须将 d3 添加到我的项目中yarn add d3 (or npm install d3).

[编辑：删除了不再有效的链接。无论如何，这并不相关。]