我从 apexcharts.com 添加了这个简单的示例。很确定导入是正确的。我没有在任何地方引用窗口。添加此文件时，我的整个应用程序就停止了。我相信这与 SSR 或 Nuxt 配置有关。
2
892<template>
<div id="chart">
<apexchart
type="donut"
width="380"
:options="chartOptions"
:series="series"
></apexchart>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
export default {
name: "Donut",
components: {
apexchart: VueApexCharts,
},
data() {
return {
data: {
series: [44, 55, 41, 17, 15],
chartOptions: {
chart: {
type: "donut",
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
},
},
};
},
};
</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
将您的组件包装在 nuxt 的
<client-only>组件中。这将防止在尝试引用不存在的window对象时 SSR/SSG 中断。例如
正如我的链接答案中所解释的（最后一句，使用直接组件语法），以下是如何制作正确的工作设置：
我还删除了一个
data，它嵌套了整个配置，已经在data()内部。这导致了 props 不匹配，如浏览器控制台错误所示。