Vue项目中fork修改npm包：该操作src还是dist？dist如何处理？

针对你碰到的dist目录处理、npm引用逻辑、源码重建三个核心问题，结合前端工程通用规则给出可直接落地的操作指引：

1. 修改源码阶段如何处理现有dist目录，是否可以直接删除 #

• 所有功能修改只针对src目录下的源文件操作，绝对不要直接编辑dist目录下的压缩产物，这类文件是编译生成的无注释压缩代码，手动修改不仅效率极低，后续构建时还会被全量覆盖，完全是无用功。
• 能否删除dist分两种场景判断：
  • 如果仓库根目录的.gitignore已经明确将dist目录标记为忽略项：本地可以随时删除，不会影响代码提交流程，也不会对后续构建造成影响。
  • 如果仓库没有把dist加入git忽略规则（很多早期Vue组件库会默认将构建产物提交到仓库，方便老版本用户直接引用）：不需要提前手动删除，保留原有dist即可——后续重新构建时，构建工具会自动覆盖原有dist的全部内容，提前删反而可能因为输出目录缺失触发不必要的构建报错。
• 避坑提醒：不要把删除dist目录的操作直接提交到fork的仓库分支，如果你的下游使用方还沿用原来的dist引用逻辑，会直接出现资源找不到的问题。

2. npm安装的组件默认引用src还是dist #

• npm包的引用路径和目录是否存在没有关系，完全由包根目录下package.json的配置字段决定，绝大多数正式发布的Vue适配库的默认规则是：
  • 优先通过main、module、exports字段指定的入口路径加载文件，90%以上的场景下这些入口都指向dist目录下的构建产物（包括压缩版生产文件、未压缩的开发调试文件、ESModule格式的输出文件）。
  • 只有极少部分未做正式构建的测试包，才会把main字段直接指向src目录下的源文件，这类包通常不具备生产可用性。
• 额外说明：哪怕你在业务项目中使用Vite、Webpack等构建工具，只要没有手动配置源码别名映射，默认解析逻辑也不会主动跳转读取包内的src目录，始终优先匹配package.json中声明的dist路径。

3. 基于修改后的src重新生成dist目录的操作步骤 #

• 第一步优先查找仓库自带的构建能力：打开根目录的package.json，在scripts字段中找到官方预置的构建命令，常见的包括build、build:lib这类标识，对应的执行命令一般是rollup -c、vite build、vue-cli-service build --target lib等。
• 操作流程：
  • 在fork的仓库根目录执行npm install安装完所有开发依赖，确保本地环境和仓库的构建版本一致。
  • 执行npm run <对应构建命令>，构建工具会按照仓库自带的配置，自动将src下的源码做兼容编译、代码压缩、格式适配，最终输出到dist目录下生成完整的生产构建产物，过程中如果dist目录不存在，构建工具会自动创建对应路径。
• 实操优化建议：
  • 不要一开始就手动修改构建配置，先跑通仓库自带的构建流程——原有配置已经适配了这个库的Vue集成要求，自行调整很容易出现兼容问题。
  • 构建完成后核对dist的文件结构，确保入口文件名、文件格式和package.json中声明的路径完全匹配，避免后续本地调试、发布时出现路径找不到的报错。
  • 如果是将fork的库通过npm link接入业务项目做功能调试，可以临时将package.json的入口指向src下的源文件，实现源码热更新，等功能调试完成后再执行正式构建生成dist即可，不需要每改一行代码就跑一次全量构建浪费时间。

内容的提问来源于stack exchange，提问作者Roger Zak