npm run build后JavaScript滑块失效，报错Swiper2未定义

问题分析 #

本地npm run dev正常，但部署到GitHub Pages后滑块报错Uncaught ReferenceError: Swiper2 is not defined，核心原因是生产构建时Swiper的加载/导入逻辑和本地开发不一致，导致你的脚本执行时找不到Swiper相关变量。

具体解决步骤 #

1. 修正脚本变量名与导入逻辑 #

打开你的review-slider.js文件，调整Swiper的导入与实例化逻辑：

• 如果是通过npm安装的Swiper，必须用ES模块导入，不能直接依赖全局变量：

// 正确导入Swiper核心及所需模块
import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';

// 初始化滑块：构造函数用大写Swiper，实例名建议用小写开头（比如swiper2）
const swiper2 = new Swiper('.review-slider', {
  // 声明使用的模块，否则滑块功能会失效
  modules: [Navigation],
  // 你的滑块配置项
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

你之前的错误大概率是直接用了全局变量Swiper2（误将实例名写成构造函数名），或者未正确导入Swiper模块。

2. 确保脚本加载顺序（CDN引入场景） #

如果是用CDN引入Swiper，要在HTML里把Swiper的脚本放在你的滑块脚本之前：

<!-- 先加载Swiper的CDN脚本 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 再加载你的review-slider.js -->
<script src="./js/review-slider.js"></script>

同时检查build生成的dist文件夹内的HTML，确认脚本顺序未被打包工具打乱。

3. 配置Vite构建基础路径（Vite项目） #

因为你使用npm run build，大概率是Vite项目，需确保构建路径适配GitHub Pages：
在vite.config.js中添加基础路径配置：

export default defineConfig({
  base: '/simply_chocolate_project/', // 与你的GitHub仓库名一致
  // 其他原有配置
})

该配置能确保build后的静态资源正确加载，避免因路径错误导致的资源缺失。

4. 本地验证构建结果 #

修改完成后执行npm run build，然后用npx serve dist本地预览构建产物，确认滑块功能正常后，再重新部署到GitHub Pages。

内容的提问来源于stack exchange，提问作者Bartosz Kozielski