vite.createFilter is not a function 问题解决

### 解决方案概述 当遇到 `el.addEventListener is not a function` 错误时，通常意味着尝试调用此方法的对象不是一个有效的DOM元素。具体原因可能涉及框架特定的行为或是第三方库的干扰。 #### UniApp中的解决方案 对于UniApp环境下的问题，如果使用的是Vue组件，则应当通过 `$el` 访问底层的真实DOM节点再绑定事件监听器[^1]： ```javascript this.$refs.content.$el.addEventListener('click', this.close); ``` 这样做能够确保获取到实际渲染后的HTML元素而非Vue封装过的引用对象。 #### Vue项目配合Element UI上传文件场景 针对Vue结合Element UI做文件上传功能时发生的此类异常，可能是由于MockJS篡改了全局范围内的`XMLHttpRequest`原型链所致[^2]。修正措施是在mock插件配置里补充缺失的方法定义: ```javascript // 修改位置位于 node_modules/mockjs/dist/mock.js 或者 src/mock/xhr/xhr.js 文件内指定行数附近 MockXMLHttpRequest.prototype.upload = xhr.upload; ``` 上述操作旨在恢复被覆盖的标准API行为，使得后续逻辑得以正常运作。 #### MPVue集成ECharts图表展示情况 MPVue环境下引入ECharts绘图工具包而触发相同类型的报错，往往可以通过降级版本来规避兼容性隐患[^3]: ```bash cnpm i echarts@5.2.2 -S ``` 安装指定历史稳定版有助于绕过潜在的新特性冲突风险。 #### Vite构建工具管理模拟服务设置 最后，在采用Vite作为打包工具的情况下，调整其内置mock服务器选项也是一种可行办法[^4]： ```typescript import { viteMockServe } from 'vite-plugin-mock'; export function configMockPlugin(isBuild: boolean) { return viteMockServe({ ... prodEnabled: false, ... }); } ``` 禁用生产模式下的mock支持能有效防止不必要的副作用影响应用运行状态。