vite项目使用CKEditor5报错踩坑记录

最近在用vue3+vite做后台学习项目的时候，想找一个富文本编辑器，找来找去还是决定用 CKEditor5 来练练手。

这里官方提供了多种方法，其中一个是手动选择自己所需要的插件和语言，问题就出在这一步上。

按照官方文档的说法，把下载下来的压缩包解压到项目的根目录后执行下面代码就能使用了

1	yarn add file:./ckeditor5

但是项目启动之后却发现页面并没有编辑器，打开控制台发现报错 The requested module ‘/ckeditor5/build/ckeditor.js’ does not provide an export named ‘default’ 。

发现报错之后就去网上搜索解决办法，但是按照网上的各种方法修改都不行。最后找到了 GitHub 上面的这条 issue 。

在 vite.config.js 增加下面配置选项就能使用了

optimizeDeps: {
  include: ['ckeditor5-custom-build/build/ckeditor'],
},
build: {
  commonjsOptions: {
    include: ['ckeditor5-custom-build/build/ckeditor'],
  },
},

然而上面的 add file 命令是用来在本地安装一个npm包。它的本质是创建一个符号链接，按照 Vite官方的说法

optimizeDeps.include

默认情况下，不在 node_modules 中的，链接的包不会被预构建。
使用此选项可强制预构建链接的包。

所以加上此选项能解决上述问题

Ryou - Blog

vite项目使用CKEditor5报错踩坑记录

完