使用Nuxt渲染C3图表

背景

我目前正在与Nuxt合作，需要在vue组件中渲染一些C3图表。C3正在Window库中调用，因此它在C3库import语句上引发错误。

窗口未定义

我知道这种情况正在发生，因为它是服务器端渲染，并且需要浏览器访问window。我也知道我需要告诉Nuxt允许该特定组件或部分组件在浏览器中呈现。

我知道C3是建立在D3之上的，所以我想我也会尝试将其加载。我读到，这就是您处理非服务器端渲染的库的方式。

范例程式码

nuxt.config.js

 plugins: [
    { src: '~plugins/d3', ssr: false },
    { src: '~plugins/c3', ssr: false },
  ],

build: {
    vendor: ['d3', 'c3'],
  },

/plugins/d3.js

import * as d3 from 'd3';

export default d3;

/plugins/c3.js

import c3 from 'c3';

export default c3;

添加这些配置后，我将移至要在其中使用它们的组件，

import * as d3 from 'd3';
import c3 from 'c3';
import 'c3/c3.css';

这使D3可以工作。但是，当我导入C3时，它仍然抛出相同的错误。所以，我读到我应该尝试一下，

   let c3 = null;
    if (process.browser) {
        c3 = require('c3');
    }

那仍然不起作用，C3仍然会引发错误。新的错误是，

未定义c3。

我正在挂载渲染C3图表

  mounted() {
    const chart = c3.generate({
      bindto: '#result-chart',
      data: {
        columns: [['data1', 30], ['data2', 120]],
        type: 'pie',
      },
    });
  },

题

据我了解，if语句正在运行，并允许页面在跳过导入的同时继续呈现。但是现在它已经跳过了，一旦页面可供浏览器使用，我该如何实际渲染图形？在我当前的实现中，C3不再适用。

我在某一时刻看到的另一个错误是未定义生成器。我不知道那是哪里来的，但以防万一。