Laravel中@vite引入app.js与Froala编辑器兼容问题求助

问题概述 #

在Laravel项目中，同时使用基于Vue.js的评论/收件箱消息系统，以及Blade模板中的Froala Editor（v4.1.3，未通过npm安装，仅在Blade中使用）。当在基础模板app.blade.php中引入@vite("resources/js/app.js")后，Froala编辑器布局显示正常，但工具栏所有功能点击无响应，浏览器控制台无任何报错信息。此前出现的SweetAlert2相关错误已修复，调整Vite资源的加载顺序后问题仍未解决。

当前资源加载顺序 #

<script src="{{url("/")}}/assets/bootstrap-5/js/jquery-3.6.1.min.js" data-pagespeed-no-defer   ></script>
<script src="{{asset("assets/bootstrap-5/js/popper.min.js")}}" defer></script>
{{--dasbhoard template's app.js--}}
<script src="{{asset("dashboard/dist/js/app.js")}}"></script>
{{-- including froala scripts files --}}
@include('back.admin.components.froala.footer-scripts-link')
    {{-- app.js for vue app --}}
@vite("resources/js/app.js")


<script src="{{url('/')}}/plugins/select2/dist/js/select2.js" ></script>

<script src="{{url('/')}}/node_modules/compress.js/build/index.js"></script>
<script src="{{url('/')}}/dashboard/dist/js/custom.js"></script>
{{--including froala instance and configuration--}}
@include('back.admin.components.froala.init-and-config')

package.json依赖 #

"dependencies": {
    "autoprefixer": "^10.4.13",
    "compress.js": "^1.2.2",
    "file-loader": "^6.2.0",
    "jquery": "^3.6.1",
    "laravel-echo": "^1.14.1",
    "moment": "^2.29.4",
    "pusher-js": "^7.4.0",
    "sweetalert2": "^11.6.5",
    "tinymce": "^6.2.0",
    "url-loader": "^4.1.1"
},

解决方案 #

1. 确保jQuery全局实例一致 #

Vite打包的app.js可能重新引入了jQuery，导致Froala依赖的全局jQuery实例被覆盖。在resources/js/app.js中显式将jQuery挂载到全局：

import $ from 'jquery';
window.$ = window.jQuery = $;

同时保证Froala的脚本始终在jQuery之后加载，确保两者使用同一实例。

2. 延迟Froala初始化时机 #

Vite资源异步加载可能导致Froala初始化时，Vue的DOM操作尚未完成，事件绑定失效。将Froala初始化代码放在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', function() {
    $('.froala-editor').froalaEditor({
        // 你的配置项
    });
});

或使用window.addEventListener('load', ...)确保所有资源加载完成后再初始化。

3. 调整Vite配置处理全局变量 #

在vite.config.js中配置Rollup输出，确保jQuery被识别为全局变量：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [laravel(['resources/css/app.css', 'resources/js/app.js'])],
    build: {
        rollupOptions: {
            output: {
                globals: {
                    jquery: 'jQuery'
                }
            }
        }
    }
});

4. 排查JS冲突 #

• 临时移除@vite("resources/js/app.js")，确认Froala是否恢复正常。
• 逐步注释app.js中的Vue相关代码，定位具体导致冲突的模块（如全局事件监听、DOM操作等）。

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