Laravel+Vite环境下如何跨JS文件调用函数？

1. 确认Vite配置有效性 #

检查你的vite.config.js，确保calendar.js已被加入input列表，示例配置：

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/js/calendar.js' // 确认已添加此文件
            ],
            refresh: true,
        }),
    ],
});

2. 改造calendar.js，暴露函数到全局 #

Vite默认将JS文件按ES模块处理，模块内部函数不会自动挂载到window全局对象，需手动暴露：

// resources/js/calendar.js

// 定义日历功能函数
export function asd() {
    // 写入具体日历逻辑
    console.log('日历功能函数执行');
}

// 将函数挂载到window，让Blade模板可访问
window.asd = asd;

如果不需要在其他JS模块中复用该函数，也可以简化写法：

// resources/js/calendar.js
function asd() {
    console.log('日历功能函数执行');
}

window.asd = asd;

3. 在Blade模板中正确引入并调用 #

在clockin.blade.php中使用@vite指令引入calendar.js，并确保在JS加载完成后调用函数：

{{-- 可放在模板head或body底部 --}}
@vite(['resources/js/calendar.js'])

{{-- 建议在DOM加载完成后执行函数，避免加载时序问题 --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    asd(); // 调用日历功能函数
});
</script>

常见错误原因解析 #

• 直接引入/resources/js/calendar.js出现404：Vite会将资源打包到public/build目录并生成带哈希的文件名，原路径不存在打包后的文件，无法访问。
• 导入到app.js后调用函数提示不存在：app.js是ES模块，导入的函数仅在模块作用域内有效，未暴露到全局，模板无法直接访问。
• asset()方法路径不符：asset指向public目录，未打包的JS文件在resources目录，打包后的文件路径为build/xxx.js，直接用asset无法正确指向。
• @vite后仅能执行全局代码：模块内的函数未挂载到window，只有直接执行的全局代码会运行，函数因作用域问题无法被模板调用。

额外注意事项 #

• 开发环境：运行npm run dev启动Vite开发服务器，确保实时编译资源。
• 生产环境：部署前执行npm run build，生成打包后的静态资源到public/build目录。
• 依赖管理：如果calendar.js依赖其他库（如fullcalendar），直接在calendar.js中导入即可，Vite会自动打包依赖：

import '@fullcalendar/core/main.css';
import FullCalendar from '@fullcalendar/core';

export function initCalendar() {
    // 初始化日历逻辑
}

window.initCalendar = initCalendar;

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