为什么我的 swiperjs 轮播在本地主机上工作但在生产环境中不工作（例如使用 netlify 或 vercel）

Question

这是我的存储库：github Netlify 制作：netlify

在我的代码中，我有分页模块，效果很好。但是自动播放模块不起作用

当我去其他部分并回到主页部分时，自动播放开始工作

import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, EffectCoverflow } from 'swiper';

// Import Swiper styles
import 'swiper/scss';
import 'swiper/scss/autoplay';
import 'swiper/scss/pagination';
import { carouselData } from '../../data/carouselData';

export default function CarouselSwiper() {
  return (
    <div className='carouselSwiper__parentDiv'>
      <Swiper
        className='carouselSwiper__Swiper'
        modules={[Autoplay, Pagination, EffectCoverflow]}
        slidesPerView={1}
        autoplay={{ delay: 2500, disableOnInteraction: false }}
        pagination={{
          clickable: true,
        }}
        loop={true}
        speed={500}
      >
        {carouselData.map(({ id, title, src }) => {
          return (
            <SwiperSlide key={id}>
              <img
                className='carouselSwiper__img'
                src={`assets/Fondos/${src}`}
                alt={title}
              />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
}

Answer 1

我不确定你是否遇到了同样的问题，但我在 Netlify 上部署时遇到了我的 Astro.js 和 Swiper.js 站点的问题。虽然 Swiper 在本地运行良好，但当我在 Netlify 上部署它时，我在浏览器控制台中遇到了 CORS 错误：'Access to script at 'https://xxx/xxx.js' from origin 'https://xx/xxx.app '已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。'

我认为这个问题是由 Netlify 的默认“资产优化”设置引起的，该设置会自动捆绑 JavaScript 文件，可能导致它们托管在不支持 CORS 的域中。一旦我禁用了这个设置，该网站就会按预期工作，类似于它在本地的工作方式。