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ǔ)丁包，會(huì)在應(yīng)用程序根目錄中創(chuàng)建一個(gè)名為補(bǔ)丁的文件夾。
里面會(huì)有一個(gè)名為 package name+0.44.0.patch 之類的文件，這是普通舊包名和固定版本之間的差異。
提交此項(xiàng)以與您的團(tuán)隊(duì)共享修復(fù)。
| 可選項(xiàng) | 描述 |
|---|---|
| –create-issue | 對于源代碼托管在 GitHub 上的包，此選項(xiàng)會(huì)打開一個(gè) web 瀏覽器，其中包含基于差異的草稿問題。 |
| –use-yarn | 默認(rèn)情況下，修補(bǔ)程序包會(huì)根據(jù)擁有的鎖定文件來檢查是使用 npm 還是 yarn。如果兩者都有，則默認(rèn)情況下使用 npm。設(shè)置此選項(xiàng)以覆蓋該默認(rèn)設(shè)置并始終使用紗線。 |
| –exclude < regexp > | 創(chuàng)建修補(bǔ)程序文件時(shí)，忽略與 regexp 匹配的路徑。路徑是相對于要修補(bǔ)的程序包的根目錄的。默認(rèn)值：package\.json$ |
| –include < regexp > | 創(chuàng)建修補(bǔ)程序文件時(shí)，只考慮與 regexp 匹配的路徑。路徑是相對于要修補(bǔ)的程序包的根目錄的。默認(rèn)值：*。 |
| –case-sensitive-path-filtering | 使 --include 或 --exclude 篩選器中使用的 regexp 區(qū)分大小寫。 |
| –patch-dir | 指定要放置修補(bǔ)程序文件的目錄的名稱。 |
嵌套的程序包
如果試圖在特定處修補(bǔ)包，如：node_modules/package/node_modules/另一個(gè)包，只需在包名稱之間加一個(gè) / 即可：
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 根目錄下
因項(xiàng)目部署系統(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)行后會(huì)在項(xiàng)目根目錄下的 patches 目錄中創(chuàng)建一個(gè)名為 worker-loader+2.0.0.patch 的文件。
將該 patch 文件提交后，即可在之后應(yīng)用該補(bǔ)丁了。
2.4 添加指令
在 package.json 的 scripts 中加入 “postinstall”: “patch-package”
后續(xù)執(zhí)行 npm install 或 yarn install 命令時(shí)，會(huì)自動(dòng)為依賴包打補(bǔ)丁。
"scripts": {
"postinstall": "patch-package"
}
2.5 注意事項(xiàng)
要修改的依賴包版本最好是固定的，即不會(huì)自動(dòng)升級版本，這樣可以避免自動(dòng)升級后導(dǎo)致補(bǔ)丁包失效，從而打包失敗影響原有功能；
協(xié)同開發(fā)的同學(xué)需要重新安裝一下依賴；
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了基于vue實(shí)現(xiàn)分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼
本篇文章主要介紹了使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
最近發(fā)現(xiàn)好多小伙伴在面試的過程中會(huì)問到vue如何使用less和scss，所以下面這篇文章主要給大家介紹了關(guān)于Less在Vue中的使用方法,需要的朋友可以參考下2023-10-10
element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))
這篇文章主要介紹了element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vant實(shí)現(xiàn)上傳多個(gè)圖片或視頻,更改視頻預(yù)覽圖
這篇文章主要介紹了Vant實(shí)現(xiàn)上傳多個(gè)圖片或視頻,更改視頻預(yù)覽圖，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題
下面小編就為大家分享一篇完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3中如何使用v-model高級用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關(guān)知識,包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
過濾器，本質(zhì)上就是一個(gè)函數(shù)。其作用在于用戶輸入數(shù)據(jù)后，它能夠進(jìn)行處理，并返回一個(gè)數(shù)據(jù)結(jié)果。下面這篇文章主要給大家介紹了Vue.js中過濾器的相關(guān)資料,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下2021-05-05