首页 文章

使用Nuxt / Vue加载D3

提问于
浏览 次
3

我正在尝试在我使用Nuxt构建的应用程序中实现D3 . 我已经使用 import * as d3 from 'd3' 将其成功导入到 <script> 部分的视图中，但是由于缺少浏览器，因此应用程序正在呈现服务器端D3 's functionality doesn' t工作（即 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 回答

  • 2

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

    我需要做的就是在我的单个文件组件中导入d3然后只在 mounted() 中使用d3进行任何dom操作，如here

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

    回复于

相关问题