Question

我正在使用laravel echo和pusher js在我的应用程序中构建实时功能。我已经完成了doc所要求的所有步骤。我已经成功设置了pusher配置，并且运行良好：当事件触发时，我会在Pusher帐户的调试控制台中收到通知。

我的问题是前端。正如docs所说，我已经在resources/js/bootstrap.js文件底部添加了必要的代码部分。我实际上未对其进行评论，并添加了正确的ID。

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key:my-pusher-key-here,
    cluster: eu,
    forceTLS: true
});

问题是，尽管我已经插入了那些

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="js/echo.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
var channel = Echo.channel('my-channel');
channel.listen('my-event', function(data) {
  alert(JSON.stringify(data));
});
</script>

在刀片视图中，我在浏览器的控制台中遇到此错误：ReferenceError: Echo is not defined。我猜想这与找不到回声库有关，但我不明白为什么。对于<script src="js/echo.js"></script>行，我复制了npm install --save laravel-echo pusher-js命令运行后得到的echo.js文件。

我经历了许多建议，例如gulp，以获得自动编译的Js文件中的更改，但我想什么也没有……对于在CLI中输入的gulp命令，我得到了{{ 1}}错误。我还尝试将代码的第一部分直接复制到No gulpfile file found文件中，但没有区别，我遇到了相同的错误。

正如我所说的..我想这肯定与找不到Echo库有关，但是为什么呢？非常感谢您的帮助

app.js文件

package.json

Answer 1

您的import Echo from 'laravel-echo';文件中有resources/js/bootstrap.js。

它尝试在 node_modules 文件夹中搜索Echo依赖项。

您应该使用laravel-mix来构建JavaScript文件。

Answer 2

我遇到了与您相同的错误，该错误发生在您的resources / js / app.js文件中。如果您评论了 require（'./ bootstrap'）; 注释，它将对您有用。

Answer 3

我相信您在取消对 resources/js/bootstrap.js 文件中的行进行注释后搞砸了这些步骤。要使用其中的代码，您需要导入 resources/js/app.js 文件。去看看，你会看到它正在导入引导文件。您可以在您的 resources/js/app.js 中导入 axios，因为您可能需要在您的刀片中使用它。确认您的 resources/js/app.js 文件至少包含以下几行：

require('./bootstrap');
const { default: axios } = require('axios');
window.Vue = require('vue').default;

然后在您的刀片文件中使用它来运行 vue：

<script src="{{ asset('js/app.js') }}"></script>
<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        mounted() {},
    });
</script>

最后检查 webpack.mix.js 文件并确认它至少有：

mix.js('resources/js/app.js', 'public/js')
.vue();

对我来说，使用 php 7.4 我必须运行 npm run production 来构建 js 文件。它运行得很好。

ReferenceError：未定义Echo

3 个答案: