问题背景
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发版时,为防止不能执行新提交的补丁包,建议选择全量进行发版
要修改的依赖包版本最好是固定的,即不会自动升级版本,这样可以避免自动升级后导致补丁包失效,从而打包失败影响原有功能
引用链接
1、vue-pdf插件文档
https://www.jianshu.com/p/d126ca551e1b