[laravel][npm] I can't use swiper error Uncaught TypeError: Swiper is not a constructor

Question

今天我试了swiper但是没用

我用 npm 安装 Swiper

npm install swiper

这是我的代码

index.blade.php

<div class="swiper-container">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="card">
                <img src="..."
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <div class="card-text">
                        <h5 class="float-left"><b>Phi Phi Island</b></h5>
                        <h6 class="float-right">Id : 12001</h6>
                        <br><br>
                        <p>This is a wider card with supporting text below as a natural
                            lead-in to
                            additional content. This content is a little bit longer.</p>
                        <hr>
                        <div>
                            <div class="float-left">Adult</div>
                            <div class="float-right">200</div>
                            <br>
                            <div class="float-left">Child</div>
                            <div class="float-right">100</div>
                            <br>
                            <div class="float-left">Infant</div>
                            <div class="float-right">0</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button type="button" class="btn btn-outline-danger">See detail
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</div>

这是脚本

$(document).ready(function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 30,
   });
});

app.js

window.Swiper = require('swiper');

app.scss

@import "~swiper/swiper.scss";

所以我已经 运行 npm 运行 dev

结果是

VM3130 app.js:31708 Uncaught TypeError: Swiper is not a constructor
    at HTMLDocument.<anonymous> ((index):556)
    at mightThrow (VM3130 app.js:31415)
    at process (VM3130 app.js:31483)

我按照swiperjs.com编码但是不工作，请帮助我！！

Answer 1

我的解决方案

在app.js

window.Swiper = require('swiper/js/swiper');

Answer 2

window.Swiper = require('swiper/swiper-bundle');

在资源应用中应该是这样的

Answer 3

我相信有无数种方法可以做到。但我会告诉你我是怎么做的。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    // add these 2 lines
    .js('node_modules/swiper/swiper-bundle.js', 'public/js')
    .postCss('node_modules/swiper/swiper-bundle.min.css', 'public/css')
    // end
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

保存您的更改并更新您的 node_modules 目录

npm run dev

然后你必须导入它：

<link href="{{ asset('css/swiper-bundle.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/swiper-bundle.js') }}"></script>

Answer 4

对于 Laravel v9.x 和 swiperjs v8.x 我找到了正确安装 swiperjs 的解决方案。

Here is the answer