Vue-cli3中使用vue-quill-editor中的ImageResize问题

在Vue-cli3项目中使用vue-quill-editor时,遇到图片上传后保持原比例导致排版困难。尝试使用quill-image-extend-module进行图片大小调整,但因缺少web pack配置导致页面无法显示。解决方案是不采用vue-cli3的web pack.base.conf.js,而是在vue.conf.js中添加相应配置,实现图片拉伸和大小调整功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-cli3使用quill-image-extend-module的图片变化大小的问题

背景: 在使用vue-quill-editor这个插件,使用的项目是基于vue-cli3,因为在富文本编辑器中上传图片,然后上传完成之后,这个图片是原比例的大小,很难排版并且难看~,所以需要对图片进行拉伸

遇到的问题:
    通过查询发现,根据指导,一步步使用之后,居然页面都无法显示了,控制台报错: imports not defined 这是什么鬼, 然后在github的vue-quill-editor插件的issue,找到了问题的原因:需要在webpack中安装一个Quill插件,正准备按照下面的回答进行Ctrl+c,Ctrl+v 时,突然想到vue-cli3没有web pack.base.conf.js这个文件(其实也不是没有,但是需要npm run eject,执行这个命令就会将所有的web pack.*.js弹出来,但是这个命令时不可逆的,所以最好还是不要使用)
nbsp;    所以就搜索了一下,vue-cli3怎么安装webpack的plugin,自然是可以配置,好像基本都可以配置在vue.conf.js这个文件中。所以遇到这个问题的解决方案如下:

  1. 如果你的项目是vue-cli3创建的,在vue.conf.js(如果没有这个文件,就手动在项目根目录和src同级,创建vue.conf.js),加上下面的配置:
 const webpack 
评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值