代码笔记

filamentphp 是可以修改代码自动刷新页面的,不仅是blade文件,resource文件也可以

同事做的项目初始化,我接手的时候,filament已经安装好了,无奈hot reload一直不行,每次改完都要按一下刷新,太难了

按照以下步骤检查了配置

env的APP_URL配置正确

vite的配置也对

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css'
            ],
            refresh: true,
        }),
    ],
});

tailwindcss也没啥问题

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    darkMode: false,
    plugins: [forms, require('daisyui')],
    daisyui: {
        themes: ['light'],
        darkTheme: false,
        base: true,
        styled: true,
        utils: true,
        prefix: "",
        logs: true,
        themeRoot: ":root",
    },
};

public目录也有hot文件

http://[::1]:5173 奈何浏览器控制台并没有

[vite] connecting...
[vite] connected.

应该是不知道为什么 @vite('resources/js/app.js') 这个代码没有注入到filamentphp的layout文件里

解决方法

直接修改adminpanelprovider,手动把这行代码注入进去

class AdminPanelProvider extends PanelProvider
{

    public function register(): void
    {
        parent::register();
        FilamentView::registerRenderHook(PanelsRenderHook::HEAD_END, fn(): string => Blade::render("@vite('resources/js/app.js')"));

    }
    public function panel(Panel $panel): Panel
    {
        return $panel;
    }
}

Vite的配置

import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**', // Custom Livewire components
                'app/Filament/**', // Filament Resources
            ],
        }),
    ],
});

完美,少按一次r😭