我使用的是 Laravel 9，我已经安装了 Bootstrap、Tailwind、jQuery 和 Vite。 这是我的 vite.config.js 文件：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
'$': 'jQuery'
}
},
refresh: true,
}),
],
});
这是我的 app.js 文件：
import './bootstrap';
import '../sass/app.scss';
import * as bootstrap from 'bootstrap';
import jQuery from 'jquery';
window.$ = jQuery;
import swal from 'sweetalert2';
window.swal = swal;
在app.blade.php中，我添加了vite js文件。
@vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/css/tailwind.css'])
@vite(['resources/js/functions.js'])
@include('sweetalert::alert')
单击按钮时，我创建了一条路线，在其中返回我的模态视图。但在我的functions.js文件中，函数.modal('show')无法识别
$("#show-data").on('click', function(){
$.ajax({
type: "POST",
url: '/getMyPersonalData',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: {
unic: $('#unic-data').val()
},
success: function (response) {
$("#show-personal-data").html(response.html);
$("#personalModal").modal("show");
},
fail: function (response) {
console.log("fail");
}
});
});
在控制台中，出现以下错误：functions.js:12 Uncaught TypeError: $(...).modal is not a function 看起来引导程序没有加载，但事实是。你有什么想法我该如何解决它吗？ 谢谢。
你可以尝试只使用 JS 的 cdn 而不要使用
import * as bootstrap from 'bootstrap';在 Laravel 10 中使用 Inertia 和 Vite：我的解决方案是在 resources 文件夹中创建一个新的 .js 文件。我将其命名为jquery.js，内容为：
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
您需要将其包含在您的 vite 配置中：
export default defineConfig({
plugins: [
laravel({
input: [
"resources/js/jquery.js",
"resources/js/app.js",
etc...
然后在刀片模板中，在加载 bootstrap 的文件之前（在我的例子中为 app.js）：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/jquery.js')
@vite('resources/js/app.js')
@vite('resources/sass/app.scss')
@inertiaHead
</head>
除非我们这样做，否则 vite 似乎会以某种方式扰乱顺序。 .Modal() 函数现在可以正常工作。