Blade视图中Vite无法加载jQuery的问题求助

• Vite不支持直接引用node_modules路径的裸模块
  Vite遵循ES模块规范，默认无法识别node_modules/jquery/dist/jquery.js这类直接指向依赖包内部文件的路径写法。这类未经过模块系统处理的路径，不会被Vite纳入构建流程，最终生成的manifest文件里也不会包含对应记录，自然会提示找不到文件。

• @vite指令的使用方式错误
  @vite指令的作用是引入你项目自己编写的入口文件（比如resources/js/app.js），而非直接指向node_modules里的第三方依赖文件。正确的做法是在入口文件中导入所需依赖，再通过@vite引入该入口文件：

// resources/js/app.js
import $ from 'jquery';
import 'bootstrap';
import '@fortawesome/fontawesome-free/css/all.css';

// 全局暴露jQuery供页面使用
window.$ = window.jQuery = $;

然后在Blade视图中使用：

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

• vite.config.js配置缺失或错误
  如果没有正确配置模块别名或资源解析规则，Vite可能无法正确定位依赖。比如给jQuery配置别名的正确写法是在vite.config.js中添加：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js'),
        },
    },
});

但注意，即便配置了别名，依然要通过入口文件导入依赖，不能直接用@vite引用node_modules路径。

• 依赖未被纳入构建流程
  如果你的入口文件中没有导入jQuery，Vite执行npm build时不会将jQuery打包到输出目录，manifest文件里也就不会有该文件的记录，访问时必然提示找不到。

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