Laravel / Livewire 在 laravel mix 编译的 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

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

Answer 1

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

1. 确保在全局窗口对象中加载Livewire 以供以后访问。

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

1. 使用这些行创建一个名为 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 并使用您自己更新版本的 @livewireScripts js 代码，它会自动附加到实际的 livewire.js 脚本标签之后。

Answer 2

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