Vue中引入使用patch-package為依賴打補(bǔ)丁問題
1. patch-package 簡介
npm i patch-package
如果不需要在生產(chǎn)中運(yùn)行 npm (如：正在制作 web 前端，則可使用 --save dev）
1.1 使用方法
制作修補(bǔ)程序
首先更改 node_modules 文件夾中特定包的文件，然后運(yùn)行
yarn patch-package package-name
或使用 npx （npm > 5.2）
npx patch-package package-name
package-name 與所更改的程序包的名稱相匹配；
如果是第一次使用補(bǔ)丁包，會在應(yīng)用程序根目錄中創(chuàng)建一個名為補(bǔ)丁的文件夾。
里面會有一個名為 package name+0.44.0.patch 之類的文件，這是普通舊包名和固定版本之間的差異。
提交此項以與您的團(tuán)隊共享修復(fù)。
| 可選項 | 描述 |
|---|---|
| –create-issue | 對于源代碼托管在 GitHub 上的包，此選項會打開一個 web 瀏覽器，其中包含基于差異的草稿問題。 |
| –use-yarn | 默認(rèn)情況下，修補(bǔ)程序包會根據(jù)擁有的鎖定文件來檢查是使用 npm 還是 yarn。如果兩者都有，則默認(rèn)情況下使用 npm。設(shè)置此選項以覆蓋該默認(rèn)設(shè)置并始終使用紗線。 |
| –exclude < regexp > | 創(chuàng)建修補(bǔ)程序文件時，忽略與 regexp 匹配的路徑。路徑是相對于要修補(bǔ)的程序包的根目錄的。默認(rèn)值：package\.json$ |
| –include < regexp > | 創(chuàng)建修補(bǔ)程序文件時，只考慮與 regexp 匹配的路徑。路徑是相對于要修補(bǔ)的程序包的根目錄的。默認(rèn)值：*。 |
| –case-sensitive-path-filtering | 使 --include 或 --exclude 篩選器中使用的 regexp 區(qū)分大小寫。 |
| –patch-dir | 指定要放置修補(bǔ)程序文件的目錄的名稱。 |
嵌套的程序包
如果試圖在特定處修補(bǔ)包，如：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 的默認(rèn)打包路徑是在 dist 根目錄下
因項目部署系統(tǒng)原因，需將 [hash].worker.js 文件移入 dist/static/js 目錄內(nèi)。
2.1 修改文件
進(jìn)入目錄 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 創(chuàng)建補(bǔ)丁
npx patch-package worker-loader
運(yùn)行后會在項目根目錄下的 patches 目錄中創(chuàng)建一個名為 worker-loader+2.0.0.patch 的文件。
將該 patch 文件提交后，即可在之后應(yīng)用該補(bǔ)丁了。
2.4 添加指令
在 package.json 的 scripts 中加入 “postinstall”: “patch-package”
后續(xù)執(zhí)行 npm install 或 yarn install 命令時，會自動為依賴包打補(bǔ)丁。
"scripts": {
"postinstall": "patch-package"
}
2.5 注意事項
要修改的依賴包版本最好是固定的，即不會自動升級版本，這樣可以避免自動升級后導(dǎo)致補(bǔ)丁包失效，從而打包失敗影響原有功能；
協(xié)同開發(fā)的同學(xué)需要重新安裝一下依賴；
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue項目打包時自動更新版本號的實現(xiàn)方法,通過在根目錄下創(chuàng)建autoVersion.js腳本文件,頁面獲取版本號時直接使用,修改package.json配置,感興趣的可以了解一下2025-02-02
在 Vue 中,我們常通過 emit 自定義事件實現(xiàn)父子組件通信（子組件觸發(fā)事件、父組件監(jiān)聽）,也可借助 eventBus 事件總線完成任意組件間的通信,下文將說明 emit 自定義事件在同步、異步邏輯下的返回值獲取方式,需要的朋友可以參考下2025-12-12
Vue3中Element Plus Table(表格)點擊獲取對應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點擊獲取對應(yīng)id方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友跟隨小編一起看看吧2024-02-02
Vue?3中引入了組合式API,它是一種新的代碼組織方式,旨在讓開發(fā)者更靈活地組織和重用Vue組件的邏輯,下面我們就來學(xué)習(xí)一下Vue中常見組合式API的使用吧2023-11-11
當(dāng)我們在Vue.js項目中引用圖片時，關(guān)于圖片路徑有以下幾種情形,下面通過本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧2017-07-07
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue-preview動態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實現(xiàn)
這篇文章主要介紹了vue-preview動態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue項目在打包時,如何去掉所有的console.log輸出
這篇文章主要介紹了vue項目在打包時,如何去掉所有的console.log輸出，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04