Laravel9+Vite环境npm run build时FilePond未定义的解决方法

问题根源 #

开发环境(npm run dev)下Vite的热替换机制会临时让单独引入的模块暴露到全局，但生产构建(npm run build)后，Vite会严格遵循ES模块规范打包，单独作为输入项的FilePond脚本不会自动挂载到window对象，导致前端代码找不到FilePond变量。

具体修复步骤 #

1. 调整vite.config.js配置 #

删除配置文件中直接导入FilePond的代码，同时把FilePond相关文件从input数组移除——我们要将其整合到app.js中统一管理：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'public/theme/dist/assets/js/widgets.bundle.js',
                'public/theme/dist/assets/plugins/custom/datatables/datatables.bundle.js',
                'public/theme/dist/assets/css/style.bundle.css',
                'public/theme/dist/assets/js/scripts.bundle.js',
                'public/theme/dist/assets/css/style.bundle.rtl.css',
                'public/theme/dist/assets/plugins/global/plugins.bundle.js'                 
            ],
            refresh: true,
        }),
    ],
});

2. 在resources/js/app.js中导入并全局挂载FilePond #

打开app.js，添加以下代码，将FilePond及其插件挂载到window对象，确保前端能全局访问：

// 导入FilePond核心
import * as FilePond from '../assets/filepond/js/filepond.js';
// 导入图片预览插件
import FilePondPluginImagePreview from '../assets/filepond/js/filepond-plugin-image-preview.js';
// 导入对应样式
import '../assets/filepond/css/filepond.css';
import '../assets/filepond/css/filepond-plugin-image-preview.css';

// 注册图片预览插件
FilePond.registerPlugin(FilePondPluginImagePreview);

// 将FilePond挂载到全局window对象
window.FilePond = FilePond;

3. 修正视图中的@vite调用 #

移除视图中单独引入FilePond的代码，只保留整合后的入口文件引用：

<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <title>Laravel</title>
</head>

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

执行以下命令确保缓存完全清理，再重新生成生产构建包：

# 清理Laravel缓存
php artisan route:clear 
php artisan cache:clear 
php artisan config:clear

# 清理Vite缓存并构建
rm -rf node_modules/.cache
npm run build

验证 #

构建完成后访问生产环境页面，检查FilePond是否能正常初始化，确认不再出现「FilePond is not defined」报错。

内容的提问来源于stack exchange，提问作者Jose A Flores Beowulfdgo