首先看下報(bào)錯(cuò)
Cannot read property 'imports' of undefined"丹弱、
Failed to mount component: template or render function not defined.、
Cannot read property 'register' of undefined
正確引入過(guò)程
1.安裝依賴
cnpm install quill-image-resize-module
2.在項(xiàng)目build文件夾中找到webpack.base.conf.js
如果找不到webpack.base.conf.js文件铲咨，可以看看webpack開(kāi)頭的文件中有哪個(gè)模塊寫(xiě)的是
module.exports = {
entry:{},
output:{},
resolve:{},
module:{}
}
因?yàn)橐趍odule中加入以下內(nèi)容躲胳，所以要找到這個(gè)webpack文件
3.在webpack文件module模塊中加入下面代碼
module.exports = {
entry:{},
output:{},
resolve:{},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
loader: 'babel-loader'
}
]}
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
}
4.在項(xiàng)目中引入
import Quill from 'quill'
import imageResize from 'quill-image-drop-module'
Quill.register('modules/imageResize', imageResize)
5.然后再富文本配置項(xiàng)中配置可縮放組件
options:{
modules:{
toolbar:[], // 配置富文本顯示哪些按鈕的
imageResize:{} // 配置圖片可縮放大小
}
}
這樣項(xiàng)目就不會(huì)報(bào)錯(cuò)啦
