c3等待加载样式 vue_vue.js – 使用Nuxt渲染C3图表

背景

我目前正在使用Nuxt,需要在vue组件中渲染一些C3图表. C3在库中调用Window,因此它会在C3库import语句中抛出错误.

window is not defined

我知道这是发生的,因为它是服务器端渲染,它需要浏览器访问窗口.我也知道我需要告诉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 is not defined.

我在mount中渲染C3图表

mounted() {

const chart = c3.generate({

bindto: '#result-chart',

data: {

columns: [['data1', 30], ['data2', 120]],

type: 'pie',

},

});

},

题

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

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