打包后多出来worker.js文件,去掉多出来的worker.js文件.使用vue-pdf遇到的问题

打包后多出来worker.js文件,去掉多出来的js文件

* 生成xxx.worker.js背景

接手公司旧项目,原本项目中有使用vue-pdf插件,引入方法使用的import pdf from 'vue-pdf', 使用npm run build打包后发现生成了dis/xxxx.worker.js文件,由于所有项目要做自动化打包不同环境,js文件最好放置在static/js中.找了网上说的几种方法:

总结网上四种方法实验

1.方法一 直接更改node包设置/node_modules/worker-olader/dist/index.js;

• 缺点 : 是删除node依赖后重新下载要手动更改

2.方法二 在node_modules添加补丁;

1. 安装patch-package：npm i patch-package --save-dev
2. 修改package.json，新增命令postinstall:

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

3. 第三步有一下几种命令都卡了,我都试了试,结果如下

• 执行 npx patch-package qiankun(报错找不到qiankun文件)
• 执行 npx patch-package 修改的node_modules依赖文件名(报错提示package-lock.json或yarn,lock不允许且找不到文件名)

• 缺点 : 是我实验了老半天没有成功,卡在了命令执行不成功

3. 方法三 还有使用"postinstall":"cp ./xxx.js . /node_modules/worker-olader/dist/index.js"文件替换

1. 意思是复制. /node_modules/worker-olader/dist/index.js内容并修改之后放在xxx.js中,
2. 之后在package.json配置中script设置"postinstall":"cp ./xxx.js . /node_modules/worker-olader/dist/index.js",
3. 之后执行npm install 报错命令不能执行(具体没有深入研究,linux可以尝试下)

• 缺点 : 之后执行npm install 报错命令不能执行(这个方法不适合前端使用,linux可以尝试下)

4. 方法四 更换引入路径为node_modules中不含worker的地址,不在生成,worker.js文件目前已经

之后运行npm run dev 不在生成xxx.worker.js. 目前不知道弊端,有知道的大佬记得通知我下

* vue-pdf使用流程

1. 下载引入避坑 一定要vue-pdf pdfjs-dist两个一块下载，不然可能显示不出来。原因没研究

npm install vue-pdf pdfjs-dist

2. 引入（不要带中括号）

import {pdf} from ‘vue-pdf’ 最开始用这个报错，去掉括号就可以了

import pdf from 'vue-pdf'

    components: {
        pdf
    }

    <pdf ref="pdfs" :src="url"></pdf>

* vue-pdf使用报错

页面正常显示但是有报错 vue.runtime.esm.js:3049 TypeError: Cannot read properties of undefined (reading ‘catch’)

1. 重新安装
   npm i pdfjs-dist@2.5.207
   npm i vue-pdf@4.2.0
2. 重启项目就可以了