Vite构建Vue3项目与jQuery全局$变量冲突问题求助

1. 阻止Vue暴露全局$变量 #

在Vite配置文件（vite.config.js/vite.config.ts）中，通过define选项覆盖Vue的全局变量暴露逻辑，避免Vue注册全局$：

export default {
  define: {
    '__VUE_GLOBAL_API__': false, // 关闭全局API暴露，包含$变量
    '__VUE_PROD_DEVTOOLS__': false // 生产环境禁用devtools，减少不必要的全局变量注入
  }
}

2. 调整模板中事件参数的写法 #

Vue3支持在事件绑定中直接传递事件对象，无需在模板中拆解$event.target，既规避冲突也更符合规范：
原代码：

<input @input="handleInput($event.target, index)" />

修改为：

<input @input="handleInput($event, index)" />

然后在方法中获取目标元素：

function handleInput(event, index) {
  const target = event.target;
  // 后续业务逻辑
}

3. 隔离jQuery的全局$ #

如果上述方案仍有冲突，可重命名jQuery的全局变量，彻底避免命名碰撞：

// 在jQuery加载后执行
const jq = jQuery.noConflict();
// 后续用jq代替$调用jQuery方法
jq('.legacy-element').addClass('active');

内容的提问来源于stack exchange，提问作者Michael Mano