使用带有 nuxtjs 的 vue-konva 失败并出现各种错误

Question

我按照 documentation and Github 我做了以下步骤：

使用 npm install vue-konva konva --save 和 npm install canvas --save.
安装 vue-konva 和 konva 以及 canvas
在 plugins 文件夹下创建了 vuekonva.js，内容如下：

import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)

在 nuxt.config.js
下添加了 plugins: [ "~/plugins/vuekonva"],
我尝试在 nuxt-config.js 下添加，但仍然没有成功：

build: {
    standalone: true
  },

在 pages 文件夹下创建了一个页面并添加了文档中的代码：

<template>
  <div>
    <v-stage ref="stage" :config="stageSize">
      <v-layer>
        <v-text :config="{ text: 'Some text on canvas', fontSize: 15 }" />
        <v-rect
          :config="{
            x: 20,
            y: 50,
            width: 100,
            height: 100,
            fill: 'red',
            shadowBlur: 10,
          }"
        />
        <v-circle
          :config="{
            x: 200,
            y: 100,
            radius: 50,
            fill: 'green',
          }"
        />
        <v-line
          :config="{
            x: 20,
            y: 200,
            points: [0, 0, 100, 0, 100, 100],
            tension: 0.5,
            closed: true,
            stroke: 'black',
            fillLinearGradientStartPoint: { x: -50, y: -50 },
            fillLinearGradientEndPoint: { x: 50, y: 50 },
            fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
          }"
        />
      </v-layer>
      <v-layer ref="dragLayer" />
    </v-stage>
  </div>
</template>

<script>
export default {
  data () {
    return {
      stageSize: {
        width,
        height
      }
    }
  },
  mounted () {
    if (process.browser) {
      this.stageSize.width = window.innerWidth
      this.stageSize.height = window.innerHeight
    }
  }
}
</script>

我收到错误： Must use import to load ES Module:

我在没有插件的情况下尝试过，但它抛出了错误：

vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <v-stage> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

不明白是什么问题，请帮忙。

Answer 1

根据 Nuxt documentation 一些插件导出 ES6 模块。我认为 konva 节点模块就是这种情况。我按照你上面提到的步骤。但是在 nuxt.config.js 文件中，我将插件配置如下：

plugins: [    
    { src: "~/plugins/vuekonva", mode: 'client' }
],

build: {
    transpile: ['konva']
},

之后我把你页面的代码替换成konvajs的代码如下：

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};

</script>

当我 link 使用 nuxt-link 访问页面时，这对我有用。但是如果我刷新页面，我会得到一些可能是 SSR 的错误。我不确定，但如果你阅读 this documentation 你也许可以解决 SSR 的问题。

使用带有 nuxtjs 的 vue-konva 失败并出现各种错误

Using the vue-konva with nuxtjs fails with various error

vue.js

nuxt.js

konvajs

konva

vue-konva