在本地开发环境中，功能一切正常，但部署到测试环境后却出现 TypeError: XHR.upload.addEventListener is not a function 错误。这个问题通常是由 Mock.js 引起的，因为它在开发环境中拦截了原生的 XMLHttpRequest 对象，导致 Axios 、七牛上传或其他依赖原生 XHR 的库无法正常工作。

一、问题分析

Mock.js 通过重写 XMLHttpRequest 原型来实现请求拦截和模拟数据。然而，这种方式可能会破坏某些库的功能，特别是那些需要访问原生 XMLHttpRequest 对象特定属性（如 qiniu.upload）的库。当这些库尝试调用 XHR.upload.addEventListener 时，由于 Mock.js 的拦截，导致该属性不存在或被修改，从而引发上述错误。

二、解决方案

为了解决这个问题，我们需要在生产环境中禁用 Mock.js，只在开发环境中使用。以下是在 vite.config.ts 文件中配置 Vite 插件 vite-plugin-mock 的方法：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', // Mock 文件目录
        localEnabled: command === 'serve', // 开发环境启用 Mock
        prodEnabled: false, // 生产环境禁用 Mock
        watchFiles: true, // 监听 Mock 文件变化
        logger: true, // 显示 Mock 请求日志
      }),
    ],
  };
});

三、代码解释

viteMockServe 插件: 用于在 Vite 项目中集成 Mock.js。
mockPath: 指定 Mock 文件的存放目录，通常为 mock。
localEnabled: command === ‘serve’: 仅在开发环境（npm run dev 或 vite 命令）启用 Mock.js。
prodEnabled: false: 在生产环境（构建后）完全禁用 Mock.js，避免影响真实接口请求。
watchFiles: true: 监听 Mock 文件变化，自动重新加载 Mock 数据。
logger: true: 在控制台显示 Mock 请求的日志信息，方便调试。

四、关键点

确保 prodEnabled 设置为 false，以防止 Mock.js 在生产环境中干扰真实请求。
localEnabled 使用 command === 'serve' 来判断是否为开发环境，从而动态启用 Mock.js。
通过以上配置，可以确保 Mock.js 只在开发环境中使用，避免在测试和生产环境中引发 TypeError: XHR.upload.addEventListener is not a function 错误，从而保证上传功能的正常运行。