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

Question

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

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

2. 在plugins 文件夹下创建vuekonva.js，内容如下：

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

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

2. 我尝试在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 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>

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