Vite + Vue3 修改 element-plus 源码

源码流程

1. 拉取源码 https://github.com/element-plus/element-plus 根据 tags 拉取对应的版本

2. 安装依赖 pnpm i

3. 运行 pnpm docs:dev 运行命令启动

4. 修改为自己需要的逻辑

5. pnpm build 进行打包

文件替换流程

1. 首先处理 vite 缓存问题，vite 首次加载都会缓存到 node_modules 下的 .vite/deps 文件，所以需要删除后在进行替换，再次启动生成新的缓存。vite 与 webpack 对比说明 vite 缓存问题

2. 确保执行第一步后进行组件的替换 打包后会生成 dist 包，找到里面的 dist\element-plus\es\components 里的组件，替换到项目 node_modules 下的 element-plus 对应的组件位置，之所以替换 es 里面的组件而不是 lib 里面的组件是，因为根据 components.d.ts 文件跟踪引用路径查找到的文件地址是 es。

3. 运行项目就可以达到修改后的效果

踩坑记录

1. 未清除 vite 在 node_modules 下的 .vite/deps 文件中缓存的依赖， 就去替换 node_modules 下的 element-plus\es\components 组件，虽然以上两种文件的地址不一样，但是指向的都是一个地方，修改一个地方另一个地方也会改变。

   • 比如 node_modules/element-plus 是一个符号链接，指向 .pnpm\[email protected][email protected]\node_modules\element-plus 修改一个地方，另一个连接指向的地址是同一个文件也会发生变化。

这时候出现的问题：即便替换了文件也达不到效果，因为启动的时候读取的还是 .vite/deps 中的缓存。