在nuxtjs中使用vue-konva会出现各种错误。

Question

我遵循了文档和Github，我执行了以下步骤：

1. 使用npm install vue-konva konva --save和npm install canvas --save安装vue-konva、konva和画布。
2. 在vuekonva.js文件夹下创建plugins，内容如下：

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

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

build: {
    standalone: true
  },

1. 在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文档，一些插件导出了一个ES6模块。我认为这就是konva节点模块的情况。我遵循了你前面提到的步骤。但是在nuxt.config.js文件中，我将插件配置为：

​

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

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

​

之后，我将页面的代码替换为孔瓦杰斯代码，如下所示：

​

<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>

​

当我用nuxt-link链接到页面时，这对我是有用的。但是如果我刷新页面，就会得到一些错误，这可能是针对SSR的错误。我不确定，但是如果你读了这份文件，你也许能解决这个问题。