Laravel 9替换Mix为Vite后Fullcalendar无法正常运行

问题分析 #

你遇到的两个错误根源分别是：

1. Uncaught Error: Please import the top-level fullcalendar lib before attempting to import a plugin. —— 插件导入依赖顺序错误，部分FullCalendar插件需要先加载核心库的完整导出
2. Uncaught ReferenceError: Calendar is not defined —— 全局挂载遗漏了部分对象，同时存在Vite模块加载时机的适配问题

修复步骤 #

1. 修正resources/js/app.js的导入与全局挂载 #

先导入FullCalendar核心库的完整模块，同时把所有用到的插件和类都挂载到window对象（包括之前遗漏的rrulePlugin）：

// 先导入核心库完整模块，确保插件能识别依赖
import '@fullcalendar/core';
import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction"; // 变量名重命名，避免和模块名混淆
import rrulePlugin from "@fullcalendar/rrule";
import deLocale from "@fullcalendar/core/locales/de";

// 全局挂载所有需要在模板中调用的对象
window.Calendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
window.interactionPlugin = interactionPlugin;
window.rrulePlugin = rrulePlugin;
window.deLocale = deLocale;

2. 修正Blade模板中的代码 #

调整插件引用名称，同时确保Vite编译的资源被正确引入：

<!-- 必须在模板中引入Vite编译的app.js，放在页面头部或合适位置 -->
@vite('resources/js/app.js')

<div id='calendar'></div>

@push('scripts')
    <script>
        // 若依赖Livewire则保留livewire:load，否则用DOMContentLoaded确保资源加载完成
        document.addEventListener('livewire:load', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new Calendar(calendarEl, {
                // 修正插件引用为全局挂载的变量
                plugins: [dayGridPlugin, timeGridPlugin, listPlugin, rrulePlugin, interactionPlugin],
                initialView: "timeGridWeek",
                locale: deLocale,
                events: [],
            });

            calendar.render();
        });
    </script>
@endpush

3. 重新编译资源 #

执行Vite命令完成代码编译：

# 开发环境
npm run dev
# 生产环境
npm run build

额外说明 #

• FullCalendar部分插件（如rrule）依赖核心库的全局初始化，提前导入@fullcalendar/core完整模块可避免依赖错误
• 所有在Blade模板中用到的变量，必须确保已挂载到window对象，不能遗漏
• 若使用Livewire，livewire:load事件监听可保留，但要保证Vite资源在Livewire初始化前完成加载

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