小编jl0*_*l0w的帖子

用Nuxt / Vue加载D3

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

module.exports = {
  plugins: [
    { src: '~plugins/vue-notifications', ssr: false }
  ]
}
Run Code Online (Sandbox Code Playgroud)

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

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

  loading: {...},

  plugins: [
     { src: '~node_modules/d3/build/d3.js', ssr: false}
  ]
}
Run Code Online (Sandbox Code Playgroud)

但是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> …
Run Code Online (Sandbox Code Playgroud)

d3.js vue.js nuxt.js

5
推荐指数
2
解决办法
1719
查看次数

标签 统计

d3.js ×1

nuxt.js ×1

vue.js ×1