使用 Nuxt/Vue 加载 D3答案

【问题标题】：Loading D3 with Nuxt/Vue使用 Nuxt/Vue 加载 D3
【发布时间】：2017-05-22 20:06:06
【问题描述】：

我正在尝试在使用 Nuxt 构建的应用程序中实现 D3。我已经使用import * as d3 from 'd3' 成功地将它导入到<script> 部分的视图中，但是由于缺少浏览器，该应用程序正在呈现服务器端D3 的功能不起作用（即d3.select(...)）。在Nuxt plugin documentation 中，它为仅限客户端的外部插件提出了一种模式：

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 在寻找 document 时会抛出一个 ReferenceError，而 Nuxt 在控制台中抛出一个 SyntaxError，指向 nuxt.config.js 的插件字段中的某些内容。

供参考，demo.vue:

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

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

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

【问题讨论】：

如果它解决了您的问题，您应该接受答案。否则，该问题将在队列中保留为未解决。

标签： d3.js vue.js nuxt.js

【解决方案1】：

对于任何来到此页面寻找解决方案的人，这些来自 piyushchauhan2011 here on GitHub 的建议让我朝着正确的方向前进。

我需要做的就是：

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

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

[编辑：删除不再有效的链接。反正也没那么重要。]

【讨论】：

@jl0w 您以什么方式保留答案中的代码记录？来自 github 的链接不再有效
@delux 没有代码。我在 Github 上谈论 this comment。
@jlow 该评论中的链接无效，因此该评论没有多大帮助

【解决方案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";

【讨论】：