无法读取未定义的属性 "document" - ApexCharts

Question

我正在尝试将 apexcharts 导入到我的 nuxt 项目中。我同时使用了 vanilla lib 和 vue 包装器。简单地导入库会导致以下错误

就像我说的，我已经尝试导入两者

import ApexCharts from "apexcharts" 和 import VueApexCharts from "vue-apexcharts"

两者return同样的错误。这是我必须在 nuxt.config.js 文件中配置的东西吗？

Answer 1

这是因为您正在使用 Nuxt.js 为您执行 SSR。由于 document 在服务器端不存在，它将中断。

要解决这个问题，有几种方法：

首先你可以创建一个plugin/apex.js负责注册你的组件

import Vue from 'vue';
import ApexChart from 'vue-apexcharts';

Vue.component('ApexChart', ApexChart);

并在您的 nuxt.config.js 中确保在客户端加载插件文件：

module.exports = {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/charts', ssr: false }
  ],
  // ....
};

现在你可以在你的应用程序的任何地方引用 ApexChart 组件，同时确保用 ClientOnly 组件包装它以防止 Nuxt 尝试在服务器端渲染它：

<ClientOnly>
  <ApexChart type="donut" :options="chartData.options" :series="chartData.series" />
</ClientOnly>

另一种方法是您可以将 Apex 图表导入为异步组件，这些组件不会在服务器端呈现，但这种方法一直很失败，请随意尝试。

通常在使用 Nuxt 或任何 SSR 解决方案时，请注意您使用的库，因为它们可能对执行环境具有隐式依赖性，例如需要特定于浏览器的 API 才能像 window 或document.

Can not read property "document" of undefined - ApexCharts