Nuxt使用Vue-Konva报错Konva.Layer is not a constructor如何解决

1. Konva导入写法错误 #

动态导入ES模块时，返回的对象默认导出内容挂载在default属性上，你直接赋值Konva = await import('konva')拿到的是模块对象，不是Konva实例，所以找不到Layer构造函数。

2. 错误注册Konva为Vue插件 #

只有vue-konva是Vue插件需要用Vue.use()注册，Konva本身是canvas操作库，不需要调用Vue.use(Konva)，这行属于冗余错误代码。

3. 模板缺失Konva舞台组件 #

你的模板里只有一个空的container div，没有使用Vue-Konva提供的v-stage、v-layer组件，所以this.$refs.stage根本不存在，后续调用getStage()也会报错。

<template>
  <div>
    <button class="btn btn-primary btn-sm" @click="addNode">
      Add Node
    </button>&nbsp;
    <v-stage ref="stage" :config="stageConfig" style="border: 1px solid #ccc;">
      <v-layer ref="layer"></v-layer>
    </v-stage>
  </div>
</template>

<script>
import Vue from 'vue'
let Konva = null

export default {
  data () {
    return {
      stageConfig: {
        width: 800,
        height: 600
      }
    }
  },
  async mounted () {
    if (process.browser) {
      const VueKonva = await import('vue-konva')
      // 正确获取Konva默认导出
      const KonvaModule = await import('konva')
      Konva = KonvaModule.default
      Vue.use(VueKonva)
    }
  },
  methods: {
    addNode () {
      const layer = this.$refs.layer.getLayer()
      const rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true // 可选配置，开启后可拖拽调整矩形位置
      })
      layer.add(rect1)
      layer.draw()
    }
  }
}
</script>

补充说明 #

• 这里提前在模板里声明了固定v-layer，不用每次新增矩形都新建图层，可减少性能消耗，如有多图层需求可按需调整逻辑
• 舞台的宽高可根据业务需求修改stageConfig里的参数
• 如果要实现点击画布任意位置绘制矩形，只需要监听stage的点击事件，获取点击坐标赋值给Rect的x、y属性即可

内容的提问来源于stack exchange，提问作者BATMAN_2008