不能读取未定义的 "document "属性 - ApexCharts

Question

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

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

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

两个都返回同样的错误。这是我必须在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.