ADH*_*DEV 3 jquery laravel jquery-select2 laravel-9
我刚刚新安装了一个 Laravel 9 应用程序，使用 npm 添加了 select2 和 jquery，将我需要传递给 vite.config.js 和 app.js 的内容传递给了 vite.config.js 和 app.js，jquery 在 select2 加载之前就已加载，但 select2 仍然抛出异常
Uncaught ReferenceError: jQuery is not defined
at select2.min.js:2:241
at select2.min.js:2:249
我什至制作了一个 div#test 并使用 jquery 在加载窗口时将“ok”放入其中，它更改为“ok”，但是为什么 select2 会抱怨呢？
包.json
"dependencies": {
"jquery": "^3.6.1",
"select2": "^4.1.0-rc.0"
}
vite.config.json
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: {
'$': 'jQuery',
},
},
});
应用程序.js
import "./bootstrap";
import $ from "jquery";
window.$ = $;
// import { Select2 } from "select2"; // does nothing when uncommented
import 'select2'; // does nothing
$("#test").html("ok");
$(document).on("load",function() { // does nothing
$(".js-example-basic-single").select2();
});
索引.blade.php
just partial paste
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div id="test"></div> <--- this will have "ok" in it since jquery is loaded
<select class="js-example-basic-single"> <--- this displays as a regular select instead of select2
<option value="x">asd</option>
<option value="x">asd</option>
<option value="x">asd</option>
<option value="x">asd</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script> <------ if I have this "jquery is not defined" will be thrown
partial paste end
如果我从末尾删除 CDN 脚本，它不会再抛出错误，但仍然无法工作。另外，CDN 仅在我测试它是否有效时使用，无论如何我都需要在本地...
我确实尝试了所有能做的事情，我已经为此苦苦挣扎了四天，但不明白这到底出了什么问题。
Roe*_*sen 25
使用以下命令安装 Select2 后npm install select2 --save-dev，您需要将以下两行添加到 bootstrap.js 中的 jQuery 导入行之后：
import select2 from 'select2';
select2();
还将 Select2 CSS 添加到 app.scss 中：
@import "/node_modules/select2/dist/css/select2.css";
或者，您可以将 Select2 CSS 添加到 app.js
import "/node_modules/select2/dist/css/select2.css";
在 JavaScript 中，您可以像以前一样使用它：
$(".js-example-basic-single").select2();
| 归档时间： |
|
| 查看次数： |
5677 次 |
| 最近记录： |