首页 > 解决方案 > index.js:1 未捕获的 ReferenceError:未定义 Swiper

问题描述

我不太熟悉使用导入/导出,但我正在努力学习它。现在我面临一个问题。

我有两个 JS 文件,core.js 和 index.js。每个页面都使用核心,主页上的索引。当我在 core.js 中导入 swiper 时,我假设我也可以在 index.js 中使用它,但它不起作用。我收到以下错误:

index.js:1 Uncaught ReferenceError: Swiper is not defined.

当我将导入语句从 core.js 复制并粘贴到 index.js 中时,它可以工作,但我认为这不是正确的解决方案,因为 index.js 的重复导入 + 额外文件大小。谁能帮我吗?

核心.js

import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css';

const uspSlider = new Swiper('.uspSlider', {
    centeredSlides: true,
    slidesPerView: 1.5,
    spaceBetween: 15,
    loop: true,
    speed: 2500,
    autoplay: {
        delay: 0,
        disableOnInteraction: false,
    },
    breakpoints: {
        992: {
            centeredSlides: false,
            autoplay: {
                delay: 1000,
                disableOnInteraction: true,
            },
            slidesPerView: 4,
            loopedSlides: 5,

        }
    }
});

index.js

const slider = new Swiper('.projectSlider', {
    autoplay: {
        delay: 2500,
    },
    speed: 500,
    centeredSlides: true,
    loop: true,
    spaceBetween: 0,
    slidesPerView: 1.3,
    breakpoints: {
        992: {
            centeredSlides: false,
            slidesPerView: 4,
            spaceBetween: 30,
        }
    }
});

标签: javascriptjavascript-importswiper.js

解决方案


推荐阅读