Vue3.0使用vue-cropper遇到的问题

在使用vue-cropper工具过程当中遇到这样一个问题，开发环境启动运行之后，截图功能可以正常使用，但是重新打包部署至服务器以后，报错：cropper未定义。

TypeError: Cannot read properties of undefined (reading 'cropper')
    at C (StepUpdate.9f3efc2b.js:1:29993)
    at gr (@vue.1c4bc3aa.js:1:47798)
    at vr (@vue.1c4bc3aa.js:1:47876)
    at HTMLDivElement.n (@vue.1c4bc3aa.js:1:53453)

看到这个报错一开始的想法是 在代码

<vueCropper 

ref="cropper"
></vueCropper>

这块的cropper未定义，所以去定义并给他赋值

const cropper = ref({})

cropper.value = currentInstance.value.ctx.$refs.cropper

然并卵。

之后想着在前端界面打个断点看看，结果就发现以下情况

结论：

报错原因并非因为上述 原因，归根结底是在Vue3中不能使用this后，我们使用了单独的一个变量通过getCurrentInstance()方法返回当前实例的对象，这会导致在开发环境执行的时候，使用

currentInstance.value.ctx.$refs.cropper.stopCrop();

可以正常执行，但是到了部署的环境，是未定义。使用以下方法去完成截图功能

//开始裁剪
currentInstance.value.refs.cropper.startCrop();
//停止裁剪
currentInstance.value.refs.cropper.stopCrop();

所以关于Vue-cropper中提供的方法，都不能使用原先的那种格式，均需要使用

currentInstance.value.refs.cropper  替换  this.$refs.cropper