Laravel中Vite全局引入jQuery依赖失败问题求助

安全阿岳

2026-6-22

解决方案

一、正确配置Vite实现jQuery全局挂载

先通过npm安装jQuery：

npm install jquery

打开resources/js/app.js，手动将jQuery挂载到全局作用域：

import $ from 'jquery';
window.$ = window.jQuery = $;

在Blade视图中用Laravel的@vite指令引入打包脚本，无需额外添加type="module"：

@vite(['resources/js/app.js', 'resources/js/geocoding.js'])

完成以上步骤后，全局的$和jQuery就能正常访问，直接移除本地jQuery文件即可。

二、解决模块脚本访问Blade自定义函数的问题

当脚本以type="module"运行时，代码处于独立作用域，无法直接访问全局函数，两种解决方式任选：

方式1：将Blade函数绑定到window对象

在Blade视图里定义函数时，直接挂载到window：

<script>
window.establecerDireccion = function(direccion) {
    // 原函数逻辑
    $('#direccion').val(direccion);
};
</script>

之后在geocoding.js中通过window.establecerDireccion()调用：

// geocoding.js
window.establecerDireccion('测试地址');

方式2：通过Vite配置声明全局变量

如果不想修改Blade里的函数定义，在vite.config.js中添加define配置：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    define: {
        establecerDireccion: 'window.establecerDireccion',
    },
});

这样在模块脚本中可以直接调用establecerDireccion()，Vite会自动将其映射为全局作用域的函数。