打包报错提示default 未被导出

报错信息如下

代码如下

import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
// 引入图片缩放插件
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

按照这种方式配置，在本地启动项目是不会报错的，只有打包发布的时候才能发现问题。

解决办法

上面的引入代码在网上随处可见，但是它并不适用于Vue3 + Vite4环境，我们需要对代码做出一些修改。

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

// 引入图片缩放插件
import 'quill-image-resize-module/image-resize.min.js'

const options = ref({
  theme: "snow",
  bounds: document.body,
  debug: "warn",
  modules: {
    // 工具栏配置
    toolbar: [
      ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
      ["blockquote", "code-block"],                    // 引用  代码块
      [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
      [{ indent: "-1" }, { indent: "+1" }],            // 缩进
      [{ size: ["small", false, "large", "huge"] }],   // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
      [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
      [{ align: [] }],                                 // 对齐方式
      ["clean"],                                       // 清除文本格式
      ["link", "image", "video"]                       // 链接、图片、视频
    ],
    // 图片缩放配置 具体需要哪些功能可以自行调整
    imageResize: {
      modules: ["Resize", "DisplaySize", "Toolbar"]
    }
  },
  placeholder: '请输入内容',
  readOnly: props.readOnly,
  theme: 'snow'
})

这里不再将ImageResize插件当作模块引入，而是直接引入对应的js文件。 运行命令 安装 @rollup/plugin-inject

pnpm add @rollup/plugin-inject -D

@rollup/plugin-inject相当于webpack.ProvidePlugin，它可以在全局中注入需要的依赖。安装完成后修改vite.config

// 导入inject插件
import inject from '@rollup/plugin-inject'

// 在plugins属性下加入以下配置，它可以在全局注入quill
inject({
  'window.Quill': ['@vueup/vue-quill', 'Quill'],
  Quill: ['@vueup/vue-quill', 'Quill']
})

至此，插件可以正常引入，打包也不再报错

cannot read property 'imports' of undefined" 错误也可以使用上述方法解决

相关链接 github.com/kensnyder/q…