解决vue 富文本使用 quill-image-resize-module imports错误

原创

已于 2024-01-08 17:31:31 修改

· 2.2k 阅读

8 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2024-01-08 17:30:07 首次发布

文章讲述了在Vue项目中使用Quill富文本编辑器时遇到的引入问题，通过在webpack配置中添加ProvidePlugin并配置`vue.config.js`来解决，同时介绍了富文本组件的使用和文件上传功能的实现。

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

一我是在这3个js文件都加上了解决的这个引入问题找了（裂开）

1：webpack.dev.conf.js

2：webpack.base.conf.js

3：webpack.base.conf.js

 new webpack.ProvidePlugin({
      'window.Quill': 'quill'
    }),

二这是网上的解决方法 vue.config.js 但是我加了上了还是报错

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }}

三富文本代码

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="uploadImg"
      accept=".png,.jpg,.gif"
      v-if="this.type == 'url'"
    >
    </el-upload>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="uploadVideo"
      accept=".mp4,.avi"