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

注： 在使用vue-pdf遇到很多问题，因个人能力有限弃坑，最后使用了pdfjs，可参考如下链接：

https://www.cnblogs.com/linjiangxian/p/13730954.html

https://blog.csdn.net/shentibeitaokong/article/details/80011900

在vue中实现pdf在线预览

1.安装vue-pdf

npm install --save vue-pdf

<template><div class="pdf" v-show="fileType === 'pdf'"><p class="arrow"><!--上一页 --><span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>{
   {currentPage}} / {
   {pageCount}}<!--下一页 --><span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span></p><!-- 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了 --><!-- src需要展示的PDF地址 --><!-- page当前展示的PDF页码 --><!-- num-pages文件总页码 --><!-- @page-loaded一开始加载的页面 --><!-- @loaded加载事件 --><pdf:src="src":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"> // </pdf></div>
</template>
import pdf from 'vue-pdf/src/vuePdfNoSss.vue'
export default {name: "login",data() {return {currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数fileType: "pdf", // 文件类型src: "/static/img/深入浅出Node.js.pdf", // pdf文件地址};},components: {pdf},created() {// 有时PDF文件地址会出现跨域的情况,这里最好处理一下this.src = pdf.createLoadingTask(this.src)},methods: {loadPdfHandler(e) {this.currentPage = 1; // 加载的时候先加载第一页},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage (val) {// console.log(val)if (val === 0 && this.currentPage > 1) {this.currentPage--// console.log(this.currentPage)}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++// console.log(this.currentPage)}},}
};

这时运行本地pdf可以正常显示，打包之后生产环境pdf显示空白，提示hash+woker.js 404

2、修改node-modules >> vue-pdf >> vuePdfNosss.vue

<style src="./annotationLayer.css"></style>
<script>import componentFactory from './componentFactory.js'// 修改部分：引入pdfjsworkerimport PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'if ( process.env.VUE_ENV !== 'server' ) {var pdfjsWrapper = require('./pdfjsWrapper.js').default;var PDFJS = require('pdfjs-dist/es5/build/pdf.js');if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {// 修改部分：注释原本的引入方法// var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/pdf.worker.js');PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();}var component = componentFactory(pdfjsWrapper(PDFJS));} else {var component = componentFactory({});}export default component;
</script>

3.修改vue.config.js中的配置文件

chainWebpack: (config) => {config.module.rule('worker').test(/\.worker\.js$/).use('worker-loader').loader('worker-loader').options({inline: true,fallback: false}).end();}