用Nuxt / Vue加载D3

Question

我正在尝试在使用Nuxt构建的应用程序中实现D3。我已成功将其导入到本<script>节的视图中，import * as d3 from 'd3'因为d3.select(...)由于缺少浏览器，正在渲染应用程序服务器端D3的功能（即）。在Nuxt插件文档中，它建议了仅客户端外部插件的模式：

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一会儿寻找，document而Nuxt会SyntaxError在控制台中把指向的plugins字段中的东西nuxt.config.js。

供参考demo.vue：

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

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

有人可以指出我做错了什么吗？

Answer 1

对于来此页面寻求解决方案的任何人，来自GitHub上 piyushchauhan2011的这些建议使我朝着正确的方向前进-

我要做的就是将d3导入到我的单个文件组件中，然后仅在d3mounted()这样的地方使用d3进行任何dom操作

在这一切之前，我当然必须使用yarn add d3（或npm install d3 --save）将d3添加到我的项目中。

Answer 2

我收到一个错误：

必须使用 import 加载 ES 模块： .../node_modules/d3/src/index.js 不支持 ES 模块的 require() 。.../node_modules/vue-server-renderer/build.dev.js 的 .../node_modules/d3/src/index.js 的 require() 是一个 ES 模块文件，因为它是一个 .js 文件，其最近的父文件package.json 包含 "type": "module" ，它将该包范围内的所有 .js 文件定义为 ES 模块。相反，将 index.js 重命名为以 .cjs 结尾，更改所需代码以使用 import()，或从 .../node_modules/d3/package.json 中删除 "type": "module"。

我通过阅读以下内容解决了这个问题：https://github.com/nuxt/nuxt.js/issues/9223

这表明您可以将其添加到您的nuxt.config.js文件中：

  build: {
    standalone: true,
  }

这使得 d3 导入能够工作。

import * as d3 from "d3";