Vue中引入使用patch-package为依赖打补丁问题
1. patch-package 简介
npm i patch-package
如果不需要在生产中运行 npm (如：正在制作 web 前端，则可使用 --save dev）
1.1 使用方法
制作修补程序
首先更改 node_modules 文件夹中特定包的文件，然后运行
yarn patch-package package-name
或使用 npx （npm > 5.2）
npx patch-package package-name
package-name 与所更改的程序包的名称相匹配；
如果是第一次使用补丁包，会在应用程序根目录中创建一个名为补丁的文件夹。
里面会有一个名为 package name+0.44.0.patch 之类的文件，这是普通旧包名和固定版本之间的差异。
提交此项以与您的团队共享修复。
| 可选项 | 描述 |
|---|---|
| –create-issue | 对于源代码托管在 GitHub 上的包，此选项会打开一个 web 浏览器，其中包含基于差异的草稿问题。 |
| –use-yarn | 默认情况下，修补程序包会根据拥有的锁定文件来检查是使用 npm 还是 yarn。如果两者都有，则默认情况下使用 npm。设置此选项以覆盖该默认设置并始终使用纱线。 |
| –exclude < regexp > | 创建修补程序文件时，忽略与 regexp 匹配的路径。路径是相对于要修补的程序包的根目录的。默认值：package\.json$ |
| –include < regexp > | 创建修补程序文件时，只考虑与 regexp 匹配的路径。路径是相对于要修补的程序包的根目录的。默认值：*。 |
| –case-sensitive-path-filtering | 使 --include 或 --exclude 筛选器中使用的 regexp 区分大小写。 |
| –patch-dir | 指定要放置修补程序文件的目录的名称。 |
嵌套的程序包
如果试图在特定处修补包，如：node_modules/package/node_modules/另一个包，只需在包名称之间加一个 / 即可：
npx patch-package package/another-package
它也适用于作用域包
npx patch-package @my/package/@my/other-package
2. 修改 vue-pdf 打包后 [hash].worker.js 路径问题
注意：本文 vue-pdf 版本为 ^4.3.0；
vue-pdf 插件中 [hash].worker.js 的默认打包路径是在 dist 根目录下
因项目部署系统原因，需将 [hash].worker.js 文件移入 dist/static/js 目录内。
2.1 修改文件
进入目录 node_modules/worker-loader/dist/index.js 找到
const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', { …… });
修改为
const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', { …… });
2.2 安装插件
npm i patch-package --save-dev npm i postinstall-postinstall --save-dev
2.3 创建补丁
npx patch-package worker-loader
运行后会在项目根目录下的 patches 目录中创建一个名为 worker-loader+2.0.0.patch 的文件。
将该 patch 文件提交后，即可在之后应用该补丁了。
2.4 添加指令
在 package.json 的 scripts 中加入 “postinstall”: “patch-package”
后续执行 npm install 或 yarn install 命令时，会自动为依赖包打补丁。
"scripts": {
"postinstall": "patch-package"
}
2.5 注意事项
要修改的依赖包版本最好是固定的，即不会自动升级版本，这样可以避免自动升级后导致补丁包失效，从而打包失败影响原有功能；
协同开发的同学需要重新安装一下依赖；
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue项目打包时自动更新版本号的实现方法,通过在根目录下创建autoVersion.js脚本文件,页面获取版本号时直接使用,修改package.json配置,感兴趣的可以了解一下2025-02-02
在 Vue 中,我们常通过 emit 自定义事件实现父子组件通信（子组件触发事件、父组件监听）,也可借助 eventBus 事件总线完成任意组件间的通信,下文将说明 emit 自定义事件在同步、异步逻辑下的返回值获取方式,需要的朋友可以参考下2025-12-12
Vue3中Element Plus Table(表格)点击获取对应id方式
这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了bpmn-js在vue中的基本使用及操作功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起看看吧2024-02-02
Vue 3中引入了组合式API,它是一种新的代码组织方式,旨在让开发者更灵活地组织和重用Vue组件的逻辑,下面我们就来学习一下Vue中常见组合式API的使用吧2023-11-11
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧2017-07-07
map()函数是在JS的数组中定义的,它返回一个新的数组,下面这篇文章主要给大家介绍了关于vue中map()快速使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本文主要介绍了element 穿梭框性能优化，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue项目在打包时,如何去掉所有的console.log输出
这篇文章主要介绍了vue项目在打包时,如何去掉所有的console.log输出，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论