Laravel 10+Livewire 3局域网部署后JS资源加载失败求助

针对你遇到的Livewire JS资源加载失败问题，结合Livewire 3的特性，按以下步骤排查解决：

1. 修正Vite配置文件 #

Livewire 3依赖Vite管理资源，需确保vite.config.js正确配置局域网地址和端口：

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

export default defineConfig({
    server: {
        host: '10.62.230.18',
        port: 81,
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
        livewire(),
    ],
});

2. 在JS入口文件导入Livewire #

打开resources/js/app.js，确保导入Livewire：

import './bootstrap';
import Livewire from 'livewire';

3. 完善布局文件的资源引入 #

你的布局只加载了CSS资源，需补充JS资源的引入，修改@vite指令：

@vite(['resources/css/app.css', 'resources/js/app.js'])

4. 清除缓存并重新构建资源 #

执行以下命令刷新配置和资源：

php artisan cache:clear
php artisan config:clear
npm run build

5. 检查服务器文件权限 #

确保存储和公共目录有正确的读写权限：

chmod -R 755 storage/ public/
chown -R www-data:www-data storage/ public/

6. 确认端口与防火墙设置 #

检查服务器的81端口是否在局域网内开放，确保办公网络内的设备可以访问该端口。

补充说明 #

你尝试的旧方案无效是因为Livewire 3已弃用livewire:assets发布资源的方式，完全改用Vite来处理资源加载，所以需要按上述Vite相关的配置来调整。

内容的提问来源于stack exchange，提问作者owf