[英]ReferenceError: Echo is not defined
我正在使用 laravel echo 和 pusher js 在我的应用程序中构建实时功能。 我已经完成了文档所要求的所有步骤。 我已经成功设置了推送器配置并且工作正常:当我的事件被触发时,我会在我的推送器帐户的调试控制台中收到通知。
我的问题是前端。 正如文档所说,我在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
命令,我收到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"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"gulp": "^4.0.2",
"laravel-echo": "^1.5.4",
"pusher-js": "^5.0.0"
}
}
你已经import Echo from 'laravel-echo';
在resources/js/bootstrap.js
文件中。
它尝试在node_modules文件夹中搜索 Echo 依赖项。
你应该使用laravel-mix来构建 JavaScript 文件。
我遇到了和你一样的错误,错误发生在你的 resources/js/app.js 文件中。 如果你评论过require('./bootstrap'); 取消注释它会为你工作。
我相信您在取消对resources/js/bootstrap.js
文件中的行进行注释后搞砸了这些步骤。 要使用其中的代码,您需要导入resources/js/app.js
文件。 去看看,你会看到它正在导入引导文件。 您可以在您的resources/js/app.js
/js/app.js 中导入 axios,因为您可能在刀片中需要它。 确认您的resources/js/app.js
文件至少包含以下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 文件。 它运行完美无缺。
从您的脚本标签中删除 defer。 这将导致 app.js 脚本被延迟,并且另一个脚本将在此脚本之前先运行
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
Go 在终端,
磁带此命令: npm install
和使用 laravel 混合: npm run dev
解决我的错误的开发。
谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.