我從 apexcharts.com 添加了這個簡單的示例。很確定導入是正確的。我沒有在任何地方引用窗口。添加此文件時,我的整個應用程序就停止了。我相信這與 SSR 或 Nuxt 配置有關(guān)。
<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>
將您的組件包裝在 nuxt 的 <client-only>
組件中。這將防止在嘗試引用不存在的 window
對象時 SSR/SSG 中斷。
例如
正如我的鏈接答案中所解釋的(最后一句,使用直接組件語法),以下是如何制作正確的工作設置:
我還刪除了一個 data
,它嵌套了整個配置,已經(jīng)在 data()
內(nèi)部。這導致了 props 不匹配,如瀏覽器控制臺錯誤所示。
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號