如何在 nuxt SSR 中设置 plotly.js？答案

【问题标题】：How to set up plotly.js in nuxt SSR?如何在 nuxt SSR 中设置 plotly.js？
【发布时间】：2021-08-06 14:25:55
【问题描述】：

我正在尝试在 nuxt 中设置 plotly.js，但无论我做什么都会收到这个神秘的错误

self is not defined

我尝试安装plotly.js 和plotly.js-dist 显示相同的错误。

我更喜欢自定义构建，所以我在 nuxt 插件中尝试过这样的操作：

// here we use custom partial bundle
import plotly from 'plotly.js/lib/core';
import barpolar from 'plotly.js/lib/barpolar';

export default function (_, inject) {
  plotly.register([barpolar]);
  inject('plotly', plotly);
}

但每当我注册 nuxt 插件站点时，都会因上述错误而崩溃。即使不使用自定义捆绑路由，使用 dist lib 仍然失败。

我也尝试不使用 nuxt 插件系统，而是手动导入并设置，同样的事情发生了。

我还按照这里的建议添加了ify-loader：https://github.com/plotly/plotly-webpack

这是我关于 webpack 插件的nuxt.config.js：

build: {
    extend(config, { isClient }) {
      console.log('config :>> ', config);
      config.module.rules.push({
        test: /\.js$/,
        use: [
          'ify-loader',
          'transform-loader?plotly.js/tasks/compress_attributes.js',
        ],
      });
    },
  },

还是没有运气。

我认为这是 webpack 5 和 plotly.js 在默认设置中不能很好地协同工作的问题，但我不知道如何解决这个问题。

帮助表示赞赏。

【问题讨论】：

标签： javascript vue.js webpack nuxt.js plotly.js

【解决方案1】：

这不起作用的原因是试图访问文档，而在 SSR 中这显然会失败。

所以要解决这个问题，我只需要在客户端模式下分配插件，如下所示：

plugins: [
    // other plugins
    { src: '~/plugins/plotly', mode: 'client' },
  ],

它成功了。

【讨论】：