vue使用vue-cropper裁剪图片报错： Failed to mount component: template or render function not defined

原创于 2019-08-15 17:19:10 发布 · 2.5k 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#vue #vue-cropper

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了解决vue-cropper新版本错误的方法，推荐将vue-cropper版本回退到0.3.6，通过卸载现有版本并重新安装指定版本来修复问题。

原因是vue-cropper新版本报错，最方便的解决办法是将vue-cropper降到旧版本，我使用的是0.3.6。

1.npm uninstall vue-cropper

2. npm install vue-cropper@0.3.6

8 条评论

pengchia 2020.12.07
降版本之后拖动截图框还是报错，求助
- RubyLinT回复pengchia 2020.12.08
  建议用下方评论里写的新版使用方式

苏大强⁠ 2020.08.23
import { VueCropper } from 'vue-cropper'; 这么写解决了！

Dreamcatcher_yxc 2020.04.10
原因很简单，Vue-Cropper 新版本组件的导出方式边了，导出模块兼容了包括可以直接使用的组件和插件形式，以 0.4.9 版本为例子，其源码导出部分代码为如下： [code=javascript] import VueCropper from './vue-cropper' const install = function(Vue) { Vue.component('VueCropper', VueCropper); } /* istanbul ignore if */ if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export { VueCropper } export default { version: '0.4.9', install, VueCropper, vueCropper: VueCropper } [/code] 则使用 ES6 import 导入应该为 import { VueCropper } from 'vue-cropper', 导入的结果自动使用 ES6 对象解析赋值了，而 0.3.6 的导出脚本如下： [code=javascript] var vueCropper = require('./vue-cropper') module.exports = vueCropper [/code] 所以使用 ES6 import 导入直接使用 import VueCropper from 'vue-cropper' 即可。当然，浏览器端导出的都是 umd 方式，导入方式也不相同，这里就不多赘述了，读者在浏览器端导入的时候可以自己打印一下导入结果查看便知。查看了npm各个版本之间的差异，新版本的修复了许多bug，所以不建议大家通过降低版本的方式解决。
- Dreamcatcher_yxc回复pengchia 2020.12.13
  我没有遇到类似的问题，不过你至少也得把哪个版本，出错的源码贴一个吧~~~[face]monkey2:008.png[/face]
- pengchia回复Dreamcatcher_yxc 2020.12.07
  大佬，有解决拖动截图框报错的方法吗

weixin_43128111 2020.01.16
感谢

weixin_43128111 2020.01.16
感谢感谢，终于解决了，遇到了同样的问题

评论 8

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

查看更多评论

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。