vue-pdf问题解决及patch-package简介

问题背景

vue中使用vue-pdf打包之后预览报错hash+worker.js路径不对404

解决方式

修改node_modules依赖并安装patch-package，将生成的补丁包提交到gitlab，发版时需全量发版

具体步骤

1、进入目录 node_modules/vue-pdf/node_modules/worker-loader/dist/index.js 找到

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {}

2、修改为

const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {}

3、安装patch-package

npm i patch-package --save-dev

4、创建补丁

npx patch-package vue-pdf/worker-loader 运行后会在项目根目录下的patches目录中创建一个名为worker-loader+2.0.0.patch的文件。将该patch文件提交后，即可在之后应用该补丁了。

5、在 package.json 的 scripts 中加入

"scripts": {
 "postinstall": "patch-package"
}

后续执行 npm install 或 yarn install 命令时，会自动为依赖包打补丁了

patch-package�使用指南

安装

1、patch-package包可以通过npm进行安装。

npm i patch-package --save-dev

2、通过yarn进行安装。

yarn add --dev patch-package postinstall-postinstall

创建补丁

npx patch-package name

• name表示被修改的依赖包的名称

• 在修改依赖包内容后，就可以运行patch-package创建patch文件了。

• 运行后通常会在项目根目录下的patches目录中创建一个名为package-name+version.patch的文件。将该patch文件提交至版本控制中，即可在之后应用该补丁了。

[图片上传失败...(image-470d5b-1631522498161)]

添加指令

在 package.json 的 scripts 中加入 "postinstall": "patch-package"，后续执行 npm install 或 yarn install 命令时，会自动为依赖包打补丁了

"scripts": {
 "postinstall": "patch-package"
}</pre>

• 每次修改node_moudle时都需要执行npx patch-package name一次，并提交到对应分支

• 在Jenkins发版时，为防止不能执行新提交的补丁包，建议选择全量进行发版

• 要修改的依赖包版本最好是固定的，即不会自动升级版本，这样可以避免自动升级后导致补丁包失效，从而打包失败影响原有功能

image.png

引用链接

1、vue-pdf插件文档

https://www.jianshu.com/p/d126ca551e1b

2、patch-package文档

https://www.npmjs.com/package/patch-package