无法读取未定义的属性“文档” - ApexCharts

Question

我正在尝试将 apexcharts 导入到我的 nuxt 项目中。我同时使用了 vanilla lib 和 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。