Laravel 12注册/登录页livewire.js与flux.js缺失问题求助

AI 小北

2026-6-14

解决Laravel 12 Livewire Starter Kit表单提交异常及静态资源404问题

问题本质

控制台出现flux.js和livewire.js的404错误，说明Livewire核心静态资源未正确加载，导致表单无法触发AJAX提交逻辑，退化为默认的GET提交方式，因此URL会追加查询字符串。

解决步骤

1. 重新发布Livewire静态资源

执行命令将Livewire的JS/CSS文件发布到public目录：

php artisan livewire:publish --assets

该命令会把资源复制到public/vendor/livewire路径下，确保前端能正确访问。

2. 清理Laravel缓存并重建前端资产

缓存异常可能导致资源路径错误，依次执行以下命令：

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

随后根据环境重建前端资产：

生产环境：npm run build
开发环境：npm run dev（保持热更新）

3. 修正`.env`中的APP_URL配置

打开项目根目录的.env文件，确保APP_URL与项目访问路径一致。例如项目部署在localhost/flux下，需设置：

APP_URL=http://localhost/flux

错误的URL会导致资源加载路径偏移，引发404。

4. 检查Vite配置文件

确认vite.config.js中的路径配置匹配项目子目录，示例配置如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-plugin-livewire';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        livewire(),
    ],
    server: {
        base: '/flux/',
        hmr: {
            host: 'localhost',
        },
    },
});

确保server.base值与项目子目录一致，保证Vite生成的资源URL正确。