Vite环境Owl carousel运行报错Cannot read 'fn' of undefined解决方案咨询

错误原因 #

你遇到的报错是因为旧版jQuery插件依赖全局挂载的jQuery/$对象，owl.carousel执行时尝试访问jQuery.fn但全局jQuery未定义，和Webpack环境下的问题根源完全一致。

等效Webpack ProvidePlugin的Vite配置方案 #

Vite底层基于Rollup实现，使用@rollup/plugin-inject即可实现完全等效的全局变量注入能力，配置步骤如下：

• 安装依赖

npm install @rollup/plugin-inject jquery -D

• 修改vite.config.js配置

import { defineConfig } from 'vite'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  // 其他原有配置保持不变
  plugins: [
    // 其他原有插件保持不变
    inject({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
})

备用手动挂载方案 #

如果配置插件后仍有兼容问题，可以直接在项目入口文件（通常是src/main.js）最顶部手动挂载jQuery到全局：

import $ from 'jquery'
window.$ = window.jQuery = $
// 确保jQuery挂载完成后再引入owl.carousel
import 'owl.carousel/dist/owl.carousel.min.js'
import 'owl.carousel/dist/assets/owl.carousel.min.css'

验证 #

重启Vite开发服务后即可正常使用owl.carousel插件，不会再报reading 'fn'相关错误。

内容的提问来源于stack exchange，提问作者Nick Langer