使用Vite构建项目后Owl-carousel失效，如何通过node_modules解决？

错误原因 #

报错Uncaught TypeError: Cannot read properties of undefined (reading 'fn')是因为Owl Carousel依赖全局环境的jQuery，但Vite生产构建时默认不会将模块内的jQuery暴露到window对象，导致Owl Carousel找不到jQuery.fn来注册插件。

解决方案 #

1. 正确安装依赖 #

先通过npm安装官方包，避免直接导入node_modules路径：

npm install jquery owl.carousel

2. 全局暴露jQuery #

在项目入口文件（如main.js或你的脚本入口）中，显式将jQuery挂载到全局window：

// 导入jQuery
import $ from 'jquery';
// 挂载到全局，供Owl Carousel识别
window.jQuery = $;
window.$ = $;

// 导入Owl Carousel的样式（必须，否则轮播样式异常）
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css'; // 可选：默认主题样式

// 导入Owl Carousel核心库
import 'owl.carousel';

// 导入你的自定义轮播配置
import './src/js/owl-carousel.js';

3. （可选）通过Vite配置全局注入jQuery #

如果不想在入口文件中手动挂载，也可以在vite.config.js中添加插件实现全局注入：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      // 可选：指定使用jQuery slim版本
      jquery: 'jquery/dist/jquery.slim.min.js'
    }
  },
  plugins: [
    {
      name: 'inject-jquery',
      transformIndexHtml(html) {
        return html.replace('</head>', `
          <script type="module">
            import $ from 'jquery';
            window.jQuery = $;
            window.$ = $;
          </script>
        </head>`);
      }
    }
  ]
});

之后在入口文件只需正常导入Owl Carousel和自定义配置即可：

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import './src/js/owl-carousel.js';

4. 验证修复 #

执行构建命令：

npm run build

预览构建后的产物，确认轮播组件正常运行，错误消失。

内容的提问来源于stack exchange，提问作者Asmaa Mahmoud