Livewire 404错误:GET http://localhost/livewire/livewire.js,net :: ERR_ABORTED 404(未找到)

8

我正在学习如何使用livewire和laravel,我尝试通过一个输入框绑定一些数据 我编写了以下代码:

home.blade.php:

<html>
<head>
    <title>Home</title>

    @livewireStyles
</head>
<body>
    @livewire("hello-world")

    @livewireScripts
</body>
</html>

hello-world.blade.php:

<div>
    <input wire:model="nome" type="text">
    <br>
    Hello {{ $nome }}
</div>

HelloWorld.php:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
    public $nome = 'Name';
    public function render()
    {
        return view('livewire.hello-world');
    }
}

当前正在运行 Apache 2.4。 但是,如果我在加载页面时打开浏览器控制台,则会出现以下错误:

(index):29 GET http://localhost/livewire/livewire.js?id=c1db26b321e994f87254 net :: ERR_ABORTED 404(未找到)

(index):35 Uncaught ReferenceError:Livewire未定义 at(index):35

我遵循官方文档和屏幕录像,尝试逐步遵循所有说明,但仍然无法解决问题。 也许我在安装过程中做错了什么,但是我认为不是这样,因为我只输入了:

composer require livewire/livewire

所以应该没问题。 有什么提示吗?

GitHub repo:learningLaravel


请您将代码复制并粘贴到问题中,而不是链接到它。 - Rwd
好的,先生,我已经发布了。@Rwd - aleemont
如果您需要,我可以在GitHub上创建一个仓库,这样您就可以查看项目的所有文件。 - aleemont
你正在使用什么URL访问你的项目?是http://localhost吗? - Clément Baconnier
我遇到了相同的问题,你能告诉我如何解决吗? - Neeraj Tangariya
显示剩余4条评论
13个回答

18

你可以尝试这样做:

运行:php artisan livewire:publish

然后打开config/livewire.php,将'asset_url' => null改为'asset_url' => 'http://localhost'


2
如果您正在运行多个项目,请使用'http://localhost/projectFolder/public',这对我很有效。 - husnain zafar

6

我也经历过同样的挑战...请按照以下步骤来解决你的问题。

运行

php artisan livewire:publish

打开config/livewire.php文件,编辑以下行:

'asset_url' => null

将其修改为:

'asset_url' => 'http://localhost/your_project/public/',

运行艺术家命令来清除缓存,然后进行测试。如果您使用Linux,则可以从这里复制。

php artisan cache:clear;php artisan config:clear;php artisan route:clear;php artisan view:clear;

享受编码!


4

我们深入研究并找到解决方案

从网络标签中可以检查到您请求的URL:

GET http://localhost/livewire/livewire.js net::ERR_ABORTED

  1. 您的基本URL

GET http://localhost/

应该是以下形式:

GET http://localhost/your_project_directory

  1. 现在纠正URL

GET http://localhost/your_project_directory/livewire/livewire.js

或者

GET http://localhost/your_project_directory/public/livewire/livewire.js

解决方案:

app / config / livewire.php

'asset_url' => env('APP_URL', 'http://localhost'),

还要相应地在.env文件中更新APP_URL

您应该清除缓存配置,然后尝试,我希望这将解决问题。


3
对于遇到相同错误且以上内容均无效的其他人。
在我的情况下,我有一个nginx服务器,它被设置为缓存和传递静态文件,如.css和.js。每当我尝试访问带有.js的路由时,nginx会尝试查找文件是否存在,如果不存在,则传递404错误代码,并阻止laravel执行它的操作。
nginx设置如下:
location ~* \.(?:css|js)$ {
10         expires 1M;
11         access_log off;
12         add_header Cache-Control "public";
13     }

我移除了|js


只是想说,这是解决此问题时的理想起点。确保服务器设置为提供文件并从那里工作。您可以运行任何喜欢的Artisan命令,但如果nginx不友好,无论如何都会受阻。 - Zakalwe

3
在我的情况下,wepe所评论的有效,只是我把'asset_url' => 'http://localhost'替换成了'asset_url' => url('/')

编辑:这在生产环境中不起作用,最好在开发模式下使用完整路径。 - edu.dev
谢谢!在Laravel 8上也有效 :) - shasi kanth

3
虽然Zenabus.dev的答案在Livewire文档中被列为最佳实践,但我认为这只是一个解决方法,并没有清楚说明为什么需要这样做,因此我想详细阐述一下404错误的常见原因以及其他选项。
默认情况下,Livewire会为livewire/livewire.js注册一条路由,并要求该URL的请求经过Laravel路由。然后,LivewireJavaScriptAssets控制器将从供应商目录中提取文件并向用户提供服务。
如果在开发系统上一切正常,而在生产系统上停止工作(就像对我一样),那么很有可能您的服务器/vhost配置(Apache、Nginx等)为JavaScript文件设置了特殊处理方式,这将干扰此过程,并尝试直接从您的文档根目录中提供这些文件,从而绕过Laravel。
请检查您的服务器配置,并确保www.yourapp.com/livewire/livewire.js实际上通过Laravel(通过public/index.php文件)进行路由。
如果没有,请删除任何特殊处理js文件的规则,确保只有在文件实际存在时才应用规则;如果您无法这样做,则可以采用发布资源的方式,如https://laravel-livewire.com/docs/2.x/installation#publish-assets所述。
另外,我个人不会像文档中描述的那样在post-autoload-dump上添加发布命令,而是在post-update-cmd上添加。我不喜欢在生产服务器上发布资产,而宁愿在需要时仅在开发系统上执行此操作,然后将公共文件推送到存储库。

2
以下命令将发布资源到您的public文件夹中,并应该解决404错误问题。
php artisan vendor:publish --force --tag=livewire:assets
@livewireScripts 指令仍然需要,但它会自动正确获取位于 /public/vendor/livewire/livewire.js 的资产。

这会获取资产,但是livewire.js仍然丢失,我有livewire.js.map文件。 - jeesoon

1
我在Livewire 3中也遇到了同样的问题,并且我解决了它。不知道这是否是正确的方法,但我会与你分享。
在安装Livewire 3之后,只需导航到
vendor/livewire/livewire 那里你可以看到一个名为'dist'的文件夹,只需复制该文件夹并粘贴到Laravel的public文件夹中。然后,在public文件夹中将'dist'文件夹重命名为livewire。在文件夹内,你可以看到livewire.js文件。这对我起作用了...

1

php artisan livewire:publish 不会抛出错误,即使当前用户没有复制文件的权限。

因此,在livewire发布命令说它已经创建了它之后,public/vendor/livewire文件夹仍然丢失。

  1. 修复我的权限并且
  2. 重新运行 php artisan livewire:publish

对我来说起作用了。


1

1
此答案已经在这里给出:https://dev59.com/nr3pa4cB1Zd3GeqPZTGO#68513944。请不要重复。 - Vega

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接