Laravel9+Vite+Vue3项目中CKEditor无法正常显示求助

问题场景 #

安装CKEditor5及相关依赖后，参照官方文档配置vite.config.js，但出现一系列错误：

• 初始配置时提示[vite] fileURLToPath is not defined
• 导入fileURLToPath后触发路径相关新错误
• 移除fileURLToPath相关代码后，CKEditor仍无法正常加载

修正后的配置文件 #

针对Laravel项目的目录结构特性，调整后的vite.config.js如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
import { fileURLToPath, URL } from 'url';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        ckeditor5({ 
            theme: '@ckeditor/ckeditor5-theme-lark' 
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./resources/js', import.meta.url))
        }
    }
});

关键调整说明 #

1. 修正@别名路径：Laravel项目默认无src目录，将别名指向实际的Vue代码存放目录resources/js，避免路径不存在的错误。
2. 简化CKEditor主题配置：直接使用包名替代require.resolve，规避CommonJS与ES模块的加载冲突。
3. 确认依赖完整性：确保已安装必需的CKEditor包：

   npm install @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-theme-lark
   

额外排查步骤 #

• 检查app.js中CKEditor的注册代码是否正确：

  import { createApp } from 'vue';
  import CKEditor from '@ckeditor/ckeditor5-vue';
  import App from './App.vue';
  
  const app = createApp(App);
  app.use(CKEditor);
  app.mount('#app');
  

• 清除Vite缓存：执行npm run build后重启开发服务器，或删除node_modules/.vite目录。

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