基于 vue-cli3.x 的vue-pdf 踩坑笔记,构建生产环境访问遇到问题 xxx.worker.js 跨域无法访问

场景:   当项目构建生产环境时把静态资源抛CDN存放, 造成跨域问题导致读取页面卡死现象.  开发过种中我找到以下的2个问题, 并且根据npm 打补丁的方式进行修正

问题分析:   
1. pdfjsWrapper.js 报错,  原因 catch方法不可用 
2. 构建生产环境后存在xxxxxx.worler.js跨域问题, 出现报错无法访问

解决方案:  
1. 打开node_modules/vue-pdf/src/pdfjsWrapper.js文件
        搜索这个方法:  this.renderPage
        删除或者屏蔽以下代码

pdfRender.cancel().catch(function(err) {
  emitEvent('error', err);
});

2. 打开 node_modules/vue-pdf/node_modules/worker-loader/dist/workers/index.js
        找到:
const publicPath = options.publicPath ? JSON.stringify(options.publicPath) : '__webpack_public_path__';

const publicPath = options.publicPath ? JSON.stringify(options.publicPath) : '__webpack_public_path__';

修改成
const publicPath = '"/"'

const publicPath = '"/"'

3. 安装 patch-package 依赖
       执行: npm i patch-package -D

npm i patch-package -D

4. 给np令m依赖包打上补丁执行以下

npx patch-package worker-loader vue-pdf

   此时会查看到需要修正的npm包代码, 项目根目录下会产生 patches 目录

 5. 重点删除 node_modules/vue-pdf/node_modules/  

node_modules/vue-pdf/node_modules/

 6. 执行 npm install 然后重新发布生产环境构建

npm install

  7. worker-loader  publicPath 再次修改请打开 

node_modules/worker-loader/dist/workers/index.js

  然后执行 npx patch-package 依赖包名重新进行 npm install