Laravel 10+Inertia.js环境下Flowbite无法正常工作求助

我当前使用Laravel 10搭配Vite、Tailwind和Inertia.js开发项目。此前未使用Inertia.js时，执行npm install flowbite并在app.js中添加import 'flowbite';即可正常使用Flowbite。但引入Inertia.js后，Flowbite完全失效。试过在app.blade.php中添加CDN链接，也配置了tailwind.config.js，问题仍未解决，恳请协助排查。

当前代码配置 #

1. app.js 代码 #

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import 'flowbite';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

2. app.blade.php 中的CDN配置 #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Bathinda Chemicals') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')

        @inertiaHead
        <link rel="stylesheet" href="https://unpkg.com/flowbite@1.4.5/dist/flowbite.min.css" />

    </head>
    <body class="m-0 font-sans antialiased font-normal dark:bg-slate-900 text-base leading-default bg-gray-50 text-slate-500">

        <div class="absolute w-full bg-indigo-500 dark:hidden h-80"></div>
        <div class="min-h-screen bg-gray-100">
            @inertia
            <script src="https://unpkg.com/flowbite@1.4.5/dist/flowbite.js"></script>

        </div>
    </body>
</html>

3. tailwind.config.js 配置 #

module.exports = {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
      "./node_modules/flowbite/**/*.js"
    ],
    theme: {
      extend: {},
    },
    plugins: [
        require('flowbite/plugin')
    ],
  }

排查与解决步骤 #

1. 移除本地导入与CDN的冲突 #

当前同时使用了本地import 'flowbite'和CDN引入，会导致JS逻辑冲突。直接删掉app.blade.php里的Flowbite CSS/JS CDN链接，仅保留本地安装版本。

2. 适配Inertia的SPA页面加载机制 #

Inertia是单页应用，页面组件动态挂载，Flowbite的JS需要在页面加载完成后重新初始化，有两种方式：

• 全局监听页面加载事件：在app.js的setup方法中添加Inertia事件监听，全局初始化Flowbite：

createInertiaApp({
    // ...其他配置
    setup({ el, App, props, plugin }) {
        const vueApp = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
        
        // 监听Inertia页面加载完成事件，重新初始化Flowbite
        window.addEventListener('inertia:page-loaded', () => {
            import('flowbite').then(module => module.initFlowbite());
        });

        return vueApp;
    },
});

• 组件内手动初始化：在需要用到Flowbite的Vue组件中，通过onMounted钩子初始化对应组件：

import { onMounted } from 'vue';
import { initAccordions, initDropdowns, initModals } from 'flowbite';

onMounted(() => {
    initAccordions();
    initDropdowns();
    initModals();
    // 根据需求添加其他Flowbite组件初始化方法
});

3. 确认Tailwind CSS编译配置 #

• 确保app.css中包含完整的Tailwind指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 检查tailwind.config.js的content数组已覆盖所有Vue/Blade文件，确保Flowbite的样式能被正确编译。

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

执行以下命令清理缓存、重新打包前端资源：

npm run build
php artisan optimize:clear

5. 检查依赖版本兼容性 #

安装最新稳定版的Flowbite，确保与Laravel 10、Inertia.js、Vue 3版本兼容：

npm install flowbite@latest

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