Vue+Laravel SPA集成自定义CKEditor遇导出错误求助

问题核心 #

你遇到的Uncaught SyntaxError: The requested module '/ckeditor5/build/ckeditor.js' does not provide an export named 'default'错误，根源不是Vite和Webpack的差异，而是自定义构建的CKEditor5使用命名导出而非默认导出，而你可能沿用了文档中默认导出的导入写法。

具体解决方案 #

1. 修正导入方式 #

打开你的Vue组件，把原来的默认导入：

import CKEditor from '/ckeditor5/build/ckeditor.js'

改为命名导入（对应你构建的编辑器类型，通常是ClassicEditor，如果是其他类型比如InlineEditor就替换成对应名称）：

import { ClassicEditor } from '/ckeditor5/build/ckeditor.js'

2. 验证自定义构建的导出内容 #

直接查看/ckeditor5/build/ckeditor.js的末尾部分，确认导出的编辑器类名。例如自定义构建的文件最后通常会有类似代码：

export { ClassicEditor };

确保你导入的名称和这里完全一致。

3. Vite配置优化（可选但推荐） #

如果开发模式下遇到CKEditor5模块加载缓慢的问题，在vite.config.js中添加依赖预构建配置，避免重复解析：

export default defineConfig({
  optimizeDeps: {
    include: ['/ckeditor5/build/ckeditor.js']
  },
  // 若CKEditor文件放在public目录，可添加路径别名简化导入
  resolve: {
    alias: {
      '@ckeditor': '/ckeditor5/build'
    }
  }
})

之后导入可以简化为：

import { ClassicEditor } from '@ckeditor/ckeditor.js'

4. Vue组件中使用示例 #

在Vue组件的setup函数中初始化编辑器：

<template>
  <div ref="editorEl"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ClassicEditor } from '/ckeditor5/build/ckeditor.js'

const editorEl = ref(null)
let editorInstance = null

onMounted(async () => {
  editorInstance = await ClassicEditor.create(editorEl.value, {
    // 你的编辑器配置，比如工具栏、插件等
    toolbar: ['bold', 'italic', 'link', 'undo', 'redo']
  })
})

// 组件销毁时销毁编辑器实例，避免内存泄漏
onUnmounted(() => {
  if (editorInstance) {
    editorInstance.destroy()
  }
})
</script>

补充说明 #

Laravel + Vite的项目中，确保CKEditor5的构建文件放在public目录下，这样Vite可以正确解析静态资源路径。如果放在resources目录下，需要额外调整Vite的资源处理配置，不过更推荐放在public目录避免编译冲突。

内容的提问来源于stack exchange，提问作者Zos