Nuxt import highcharts 僅用於客戶端

Question

在我的 vue 應用程序中，我的組件中有以下導入

import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
treemapInit(Highcharts);

現在我有了 nuxt，我只需要為客戶端導入這部分，因為它在服務器端出現錯誤而失敗。

這個怎么做？ 請不要向我推薦 Nuxt 插件，因為由於性能原因我想在本地使用它。

謝謝！

Answer 1

代碼執行兩次 - 在服務器端，然后在客戶端。 第一次運行是在缺少window並導致 Highcharts 被加載但未初始化的環境中完成的。 if檢查 Highcharts 是 object 還是 function，則修復是放置所有模塊 inits。 它應該是用於模塊初始化的 object：

import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";


if (typeof Highcharts === "object") {
  treemapInit(Highcharts);
}

---

文檔： https://github.com/highcharts/highcharts-vue#readme

類似線程： https://github.com/highcharts/highcharts-vue/issues/73