vue-pdf 无法线上预览 路径404

时间：2025-02-18 09:50:46

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

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

	import componentFactory from './'
	import PdfjsWorker from 'pdfjs-dist/build/'//此处为修改增加

	if ( process.env.VUE_ENV !== 'server' ) {

		var pdfjsWrapper = require('./').default;
		var PDFJS = require('pdfjs-dist/es5/build/');

		if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {
              
			// var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/');此处为原始代码，需注释掉
			PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
		}

		var component = componentFactory(pdfjsWrapper(PDFJS));
	} else {

		var component = componentFactory({});
	}

	export default component;
</script>

然后修改build里的配置文件，vue-cli3以下的版本，在build/文件里增加配置

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

vue-cli3以上，在文件里添加以下代码，如果是vue-cli3以上版本，本地的PDF需在public文件夹下建一个static文件夹并将PDF文件放在里面，并且引用的时候只能使用绝对路径，而且 / 就表示 public 文件夹，所以需要忽略掉，例如：src=" /static/ ",不这样写的话页面会是空白，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对应路径的文件夹将打包生成的文件放进去，例如404路径为：/aaa/bbb/,那么在项目根目录创建对应路径的文件夹将文件放进去就可以啦

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

相关文章