从Swiper 6升级至9.4.1遇报错：无法解析'swiper/core'

Swiper 9重构了包的目录结构，移除了swiper/core这个导入路径，这就是你遇到Error: Can't resolve 'swiper/core'的核心原因。

解决步骤如下：

• 替换原导入语句，将：

  import Swiper, { Navigation, Pagination } from 'swiper/core';
  

  修改为：

  import Swiper, { Navigation, Pagination } from 'swiper';
  

• 初始化Swiper时，必须通过modules配置项注册需要的组件（这是Swiper 9的强制要求，否则组件无法生效）：

  const swiper = new Swiper('.swiper-container', {
    modules: [Navigation, Pagination],
    // 按需添加组件的具体配置
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
  

如果是在Vue、React等框架环境下使用Swiper，需对应使用框架专属的导入路径（比如swiper/vue、swiper/react），但基础JS场景下，上述修改即可解决导入报错问题。

内容的提问来源于stack exchange，提问作者Londolani Ndou