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

Question

我按照文档和Github执行了以下步骤：

1. npm install vue-konva konva --save使用and安装 vue-konva 和 konva 和画布npm install canvas --save。

2. 在具有以下内容的文件夹下vuekonva.js创建：plugins

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

3. 添加plugins: [ "~/plugins/vuekonva"],下nuxt.config.js

4. 我尝试添加下nuxt-config.js但仍然没有运气：

build: {
    standalone: true
  },

5. 在文件夹下创建了一个页面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']
},

之后，我将您页面的代码替换为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>

当我使用 链接到页面时，这对我有用nuxt-link。但是如果我刷新页面，我会收到一些可能是 SSR 的错误。我不确定，但如果您阅读此文档，您也许可以解决 SSR 的问题。