时间戳

首页 > 解决方案 > 无法读取未定义的属性“文档” - ApexCharts

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

问题描述

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

错误

就像我说的，我已经尝试同时导入

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

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

标签： vue.jsnuxt.jsapexcharts

解决方案

这是因为您使用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.

推荐阅读