在Nuxt.js中使用vue-konva出现多种错误该如何解决？

1. Must use import to load ES Module报错：vue-konva和konva较新版本默认采用ES Module规范输出，而Nuxt2默认服务端运行环境使用CommonJS规范加载依赖，模块规范不兼容导致加载失败。
2. 未知<v-stage>组件报错：vue-konva依赖浏览器canvas环境，服务端渲染阶段初始化插件失败，导致组件未被正确注册。

1. 修改插件加载配置
   调整nuxt.config.js中的plugins配置，指定vuekonva插件仅在客户端运行：

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

也可以直接将plugins目录下的vuekonva.js重命名为vuekonva.client.js，Nuxt 2.12+版本会自动识别为仅客户端加载的插件，无需额外配置mode。

2. 配置依赖转译
   在nuxt.config.js的build配置中添加transpile规则，将ES Module规范的vue-konva和konva转译为适配Nuxt的CommonJS格式，之前添加的standalone配置可以删除：

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

3. 调整页面代码
   给stageSize添加初始值避免初始化报错，同时用<client-only>标签包裹konva相关组件，避免服务端渲染阶段识别未知组件：

<template>
  <div>
    <client-only>
      <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>
    </client-only>
  </div>
</template>

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

4. 可选优化
   如果你不需要做服务端导出canvas图片，可以卸载canvas依赖，该依赖仅用于Node环境运行konva，浏览器端不需要，可避免不必要的依赖安装错误。

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