Inertia JS添加外部JS文件异常：时而可用时而失效求助

问题根源 #

你当前同时通过本地import和CDN链接重复引入了Flowbite，这会导致：

• 同一库重复加载引发变量覆盖、初始化冲突
• Inertia单页应用切换页面时，脚本执行时机不一致，导致组件时而能初始化时而不能

解决方案步骤 #

1. 统一引入方式（二选一，推荐npm安装）

方式一：使用npm安装Flowbite（更稳定）

• 安装依赖：

npm install flowbite

• 修改resources/js/app.js，替换原本地引入为包引入：

import './bootstrap';
import 'flowbite'; // 引入Flowbite核心脚本
import '../css/app.css';
import 'flowbite/dist/flowbite.min.css'; // 引入Flowbite样式

• 删除app.php中所有CDN引入的Flowbite代码：
  • 移除<head>里的<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.css" rel="stylesheet" />
  • 移除<body>末尾的<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js"></script>

方式二：仅使用本地文件

• 删除app.php中的CDN引入代码
• 确保resources/js/flowbite.min.js和resources/css/flowbite.min.css路径正确，且仅在app.js中引入一次

2. 适配Inertia单页应用的组件初始化

Inertia切换页面时不会重新加载整个页面，Flowbite的组件（如下拉菜单、模态框）需要在页面渲染完成后重新初始化：
在app.js中添加Inertia事件监听：

import { Inertia } from '@inertiajs/inertia';

// 页面切换完成后重新初始化Flowbite
Inertia.on('page:finish', () => {
  if (window.flowbite) {
    window.flowbite.initFlowbite();
  }
});

3. 检查Vite配置（确保资源被正确打包）

确认vite.config.js包含正确的输入路径，示例：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.js', 'resources/css/app.css'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

验证 #

执行npm run dev或npm run build重新打包资源，测试页面切换时Flowbite组件是否能稳定工作。

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