使用vue-pdf时本地可以正常预览但是打包发布测试后报worker.js文件404,目前发现有两种解决办法,第一种是修改依赖文件,这样打包后worker.js会被打包进vendor文件,导致vendor文件过大,页面加载慢;第二种就是在文件根目录建一个404的路径文件夹,把打包生成的worker.js文件放进去就可以,以下代码示例:
第一种,修改依赖
在依赖中找到此路径的文件并打开:node_modules/vue-pdf/src/vuePdfNoSss.vue

<style src="./annotationLayer.css"></style>
<script>

	import componentFactory from './componentFactory.js'
	import 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>

然后修改build里的配置文件,vue-cli3以下的版本,在build/webpack.base.conf.js文件里增加worker.js配置

             {
                test: /\.worker\.js$/,
                loader: 'worker-loader',
                options: {
                    inline: true,
                    fallback: false
                         }
             },

vue-cli3以上,在vue.config.js文件里添加以下代码,如果是vue-cli3以上版本,本地的PDF需在public文件夹下建一个static文件夹并将PDF文件放在里面,并且引用的时候只能使用绝对路径,而且 / 就表示 public 文件夹,所以需要忽略掉,例如:src=" /static/XXX.pdf ",不这样写的话页面会是空白,PDF将不能正常显示出来

chainWebpack: (config) => {
    // 处理vue-pdf打包文件404
    config.module
    .rule('worker')
    .test(/\.worker\.js$/)
    .use('worker-loader').loader('worker-loader')
    .options({
        inline: true,
        fallback: false,
    }).end();
 }

第二种方法就是在项目根目录建立404对应路径的文件夹将打包生成的worker.js文件放进去,例如404路径为:http://xxx.com/aaa/bbb/ccc.worker.js,那么在项目根目录创建对应路径的文件夹将文件放进去就可以啦

以上两种方法都实测可行,建议使用第二种。第一种会导致打包文件过大,影响页面加载速度,大家有更好的方法可以讨论哈

Logo

前往低代码交流专区

更多推荐