Laravel Blade中Vue实例无法识别Echo的问题求助

在Laravel Blade中使用Vue.js时，Vue挂载的实例无法识别Echo对象，但页面中的普通JavaScript脚本标签却能正常调用它。

相关代码 #

Vue对象代码 #

Vue.createApp({
    data() {
        return {
            messages: [],
        };
    },
    mounted() {
        Echo.channel('chats')
            .listen('TestRevertWorks', (e) => {
                console.log(e.message);
            });
    }
}).mount('#app');

尝试的全局调用代码 #

window.Echo.channel('chat')

此时返回“channel未定义”错误。

页面中正常工作的脚本 #

<script type="module">
    console.log('on page page for profile');
    Echo.channel('chats')
        .listen('TestRevertWorks', (e) => {
            console.log(e.message);
        });
</script>

bootstrap.js内容 #

import axios from "axios";
import toastr from "toastr";
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.toastr = toastr;
window.toastr.options = {
    "progressBar": true
};
window.axios = axios;

window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

app.js内容 #

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

import 'flowbite';

解决方案 #

1. 调整脚本加载顺序 #

Vue的初始化脚本必须在app.js之后加载。在Blade模板中，确保引入顺序如下：

<!-- 先加载app.js，确保Echo已初始化 -->
<script src="{{ mix('js/app.js') }}"></script>

<!-- 再加载Vue初始化脚本 -->
<script>
    Vue.createApp({
        // ... 你的Vue代码
    }).mount('#app');
</script>

Echo是在bootstrap.js中挂载到window的，而app.js引入了bootstrap.js，如果Vue脚本先执行，此时Echo还未被初始化，就会出现找不到的错误。

2. 验证Echo的存在性 #

在Vue的mounted钩子中先打印window.Echo，确认是否已初始化：

mounted() {
    console.log(window.Echo); // 检查输出是否为Echo实例
    if (window.Echo) {
        window.Echo.channel('chats')
            .listen('TestRevertWorks', (e) => {
                console.log(e.message);
            });
    }
}

3. 检查模块脚本的作用域 #

如果Vue脚本使用了type="module"，需要明确通过window.Echo访问，不能直接用Echo——模块脚本有独立作用域，不会自动继承全局变量：

<script type="module">
    Vue.createApp({
        mounted() {
            window.Echo.channel('chats')
                .listen('TestRevertWorks', (e) => {
                    console.log(e.message);
                });
        }
    }).mount('#app');
</script>

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