Bootstrap 模式在 laravel js 文件中不起作用答案

【问题标题】：Bootstrap modal doesn't work in laravel js fileBootstrap 模式在 laravel js 文件中不起作用
【发布时间】：2023-02-09 04:59:47
【问题描述】：

我正在使用 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 中，我添加了 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 似乎没有加载引导程序，但它是。你有什么想法我该如何解决？谢谢。

【问题讨论】：

标签： php jquery laravel bootstrap-modal laravel-9

【解决方案1】：

你可以尝试只为 JS 使用 cdn，不要使用 import * as bootstrap from 'bootstrap'; 但对于 css，请保持 sass。为我工作，但只是一种解决方法。我有同样的问题......这是对我有用的唯一方法。

【讨论】：