Laravel/Livewire在Laravel混合编译的app.js中不起作用

Question

我将Laravel与Livewire一起使用。我想对js中的事件做出反应。一旦发出，就会出现js警报。如果我有js函数的话，问题似乎出在app.js中。我收到一个错误，Livewire不可用。我使用Laravel Mix来编译它，它编译得很好。

Error: Uncaught TypeError: Livewire.on is not a function

app.js:

import Livewire from '../../vendor/livewire/livewire/dist/livewire'; 
Livewire.on('testEvent', function () {
alert("test");
});

这看起来像是一个重要的问题。我已经删除了这个包并再次尝试，我也认为这是一个时间问题，所以我在加载文档时执行了，但仍然存在同样的问题。然后我决定通过组件刀片文件将它直接推送到堆栈中，在这里一切都很好。

@push('scripts')
<script>
Livewire.on('testEvent', function () {
alert("test");
});
</script>
@endpush

应该不需要将它推到堆栈中，因为我已经看到其他没有它的代码片段，并且错误似乎是一个简单的导入问题？

Answer 1

使用浏览器检查器，查看页面中是否加载了@livewireStyles和@livewireScripts。确保Livewire已安装

Answer 2

请注意，@livewireScripts在实际的livewire.js文件后面放了一些js代码。所以

1. 请确保在全局窗口对象内加载Livewire，以便以后访问

window.Livewire = require("../../public/vendor/livewire/livewire.js");` 

2. 使用以下行创建一个名为livewire.js的新文件

if (window.livewire) {
console.warn(
"Livewire: It looks like Livewire's @livewireScripts JavaScript assets have already been loaded. Make sure you aren't loading them twice."
);
}
window.livewire = new window.Livewire();
window.livewire.devTools(true);
window.Livewire = window.livewire;
window.livewire_app_url = "";
window.livewire_token = "ZgcGN7YWdBf2wfwJQoDJ3pUHfwhBmAAlSoeBpQXD";
/* Make sure Livewire loads first. */
if (window.Alpine) {
/* Defer showing the warning so it doesn't get buried under downstream errors. */
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
console.warn(
"Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire's scripts are loaded before Alpine.\n\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js"
);
});
});
}
/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
window.addEventListener("livewire:load", function () {
callback();
});
};
let started = false;
window.addEventListener("alpine:initializing", function () {
if (!started) {
window.livewire.start();
started = true;
}
});
document.addEventListener("DOMContentLoaded", function () {
if (!started) {
window.livewire.start();
started = true;
}
});

请确保您使用的是最新版本的livewire，并使用您自己更新的@livewireScriptsjs代码，该代码会自动附加在实际的livewire.js脚本标记之后