参考错误：回声未定义

Question

我正在使用带有 pusher js 的 laravel echo 在我的应用程序中构建实时功能。我已经完成了doc要求的所有步骤。我已经成功设置了 pusher 配置并且它工作正常：当我的事件被触发时，我会在我的 Pusher 帐户的调试控制台中收到通知。我的问题是前端。正如文档所述，我在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 文件中的更改，我猜但什么都没有......对于gulp在我的 CLI 中输入的命令，我收到No gulpfile file found错误。我也试过直接在app.js文件中复制代码的第一部分，但没有区别，我遇到了同样的错误。正如我所说.. 我想这肯定与未找到 Echo 库有关，但为什么呢？您的帮助将不胜感激package.json 文件    "private": true,    "scripts": {        "build": "webpack -p",        "watch": "npm run development -- --watch",        "dev": "npm run development",        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",        "watch-poll": "npm run watch -- --watch-poll",        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",        "prod": "npm run production",        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"    },

Answer 1

我遇到了和你一样的错误，错误发生在你的 resources/js/app.js 文件中。如果你评论过require('./bootstrap'); 取消注释它会为你工作。

Answer 2

你有import Echo from 'laravel-echo';内部resources/js/bootstrap.js文件。

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

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

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 文件。它运行完美无缺。