如何让Vite与Laravel 11（Blade）协同处理样式与脚本？

云原生阿岚

2026-6-23

解决Laravel 11 + Vite中JS函数未定义问题

问题根源

Vite默认将JS打包为ES模块，模块内部的函数和变量处于模块作用域，不会自动暴露到全局window对象中，所以Blade模板里的onclick="cancel()"无法找到该函数。

解决方案

方案1：将函数挂载到全局window对象（快速适配现有代码）

修改cancel.js，将函数绑定到window：

function cancel() {
    history.back();
}

// 暴露到全局作用域
window.cancel = cancel;

如果用export语法，也可以在app.js中统一挂载：
cancel.js：

export function cancel() {
    history.back();
}

app.js：

import "./axios";
import { cancel } from "./cancel";
import "./dropdown";
import "./patient";

// 挂载到全局
window.cancel = cancel;

方案2：使用事件监听（现代JS规范推荐）

避免使用HTML内联onclick，改用JS事件绑定，更易维护且符合模块化理念：

修改Blade模板中的按钮，添加标识：

<button class="cancel-btn">取消</button>

更新cancel.js，封装初始化逻辑：

export function setupCancelButton() {
    const cancelButtons = document.querySelectorAll('.cancel-btn');
    cancelButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            history.back();
        });
    });
}

在app.js中初始化（确保DOM加载完成后执行）：

import "./axios";
import { setupCancelButton } from "./cancel";
import "./dropdown";
import "./patient";

// 等待DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    setupCancelButton();
});