我從 apexcharts.com 新增了這個簡單的範例。很確定導入是正確的。我沒有在任何地方引用視窗。添加此文件時,我的整個應用程式就停止了。我相信這與 SSR 或 Nuxt 配置有關。
<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
,它嵌套了整個配置,已經在data()
內部。這導致了 props 不匹配,如瀏覽器控制台錯誤所示。