nuxt.js：窗口未定义apexcharts/vue-apexcharts

Question

我添加了这个简单的示例，来自 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>

Answer 1

如我的链接答案（最后一句话，带有直接组件语法） ：

<template>
  <div id="chart">
    <client-only>
      <apexchart
        type="donut"
        width="380"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </client-only>
  </div>
</template>

<script>
export default {
  name: 'Donut',
  components: {
    [process.browser && 'apexchart']: () => import('vue-apexcharts'),
  },
  data() {
    return {
      series: [44, 55, 41, 17, 15],
      chartOptions: {
        chart: {
          type: 'donut',
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 200,
              },
              legend: {
                position: 'bottom',
              },
            },
          },
        ],
      },
    }
  },
}
</script>

我还删除了一个已经嵌套整个配置的data已经嵌套了data（）的内部。如浏览器控制台错误所示，这导致了不匹配的道具。

Answer 2

将您的组件包装在NUXT的＆lt;仅客户端＆gt;组件中。试图引用不存在的窗口对象时，这将阻止SSR/SSG破坏。

例如

<client-only>
  <chart-component />
</client-only>