Question

背景

我目前正在使用Nuxt，需要在vue组件中渲染一些C3图表。 C3正在调用库中的Window，因此它会在C3库导入语句上抛出错误。

窗口未定义

我知道这种情况正在发生，因为它是服务器端呈现，需要浏览器才能访问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未定义。

我在mount

中渲染C3图表

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

问题

据我了解，现在if语句正在工作，允许页面在跳过导入时继续呈现。但是现在它已经跳过了它，一旦页面可用于浏览器，我该如何实际渲染图形？使用我当前的实现C3永远不会在范围内。

我在一个点看到的另一个错误是生成器未定义。我无法弄清楚它来自哪里，但以防万一有帮助。

Answer 1

根据您的描述，使用nuxt插件并在组件中两次导入d3和c3。我认为您可以通过以下方式进行操作：

/plugins/chart.js

import * as d3 from 'd3';
import c3 from 'c3';

export default (ctx, inject) => {
  inject("d3", d3);
  inject("c3", c3);
};

/nuxt.config.js

plugins: [
  { src: "~/plugins/chart", ssr: false }
]

inject方法会将d3和c3对象插入nuxt上下文，以便您可以使用this.$d3和this.$c3来调用它们，例如：

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

使用Nuxt

1 个答案: