vue3 修改naiveui node_modules相关源码

问题：假如naiveui源码中方法和其他三方引入的方法冲突时，如何解决？

比如naiveui的select多选时，关闭某一个标签时，出现如下报错：

 Tag.js路径为node_modules\naive-ui\es\tag\src\Tag.js，定位是由于阻止冒泡的方法undefined阻塞导致的，所以采用覆盖插件依赖包的方式，具体如下：

1，在node_modules同级下新建scripts文件夹，再新建new_node_modules文件夹，注意不能是node_modules同名；找到报错的源码js，并在new_node_modules下新建同样的目录结构，最后一级是要覆盖替换修改的js文件；

 2，changeModules.js文件源码如下：

const fs = require('fs');
const path = require('path');

// 解决 node_modules 修改源码，导致重新装包而要手动替换源码的重复操作。

// 将 scripts/node_modules 内的文件 覆盖 真正的 node_modules

const REAL_NODE_MODULES = path.resolve('./node_modules'); // 旧node_modules

const MY_NODE_MODULES = path.resolve('./scripts/new_node_modules'); // 新node_modules

copy(MY_NODE_MODULES, REAL_NODE_MODULES);

/**

*复制目录中的所有文件包括子目录

*@param{string}需要复制的目录、文件

*@param{string}复制到指定的目录、文件

*@param{function}每次复制前，都会经过一次filterFn，若返回true，则复制。

*/

function copy(origin, target, filterFn = () => true) {
  if (fs.statSync(origin).isDirectory()) {
    // 来源是个文件夹，那目标也整一个文件夹

    if (!fs.existsSync(target)) {
      fs.mkdirSync(target);
    }

    fs.readdirSync(origin).forEach(originName => {
      const originFilePath = path.resolve(origin, originName);

      const targetFilePath = path.resolve(target, originName);

      copy(originFilePath, targetFilePath, filterFn);
    });
  } else if (filterFn(origin, target)) {
    fs.copyFileSync(origin, target);
  }
}

3，package.json中设置如下：

  "scripts": {
    "dev": "npm run changeModules && cross-env NODE_ENV=development vite",
    "build": "npm run changeModules && vite build",
    "preview": "npm run changeModules && vite preview",
    "interface": "node .interface-auto.js",
    "changeModules": "node ./scripts/changeModules.js"
  },

最后，如果发现修改源码后未生效，大概率是因为vite的缓存问题，可以删除nodeModules里面的.vite文件，也可以在dev后面添加 --force，重新dev即可；