vue-pdf 无法线上预览 路径404
1.使用vue-pdf时本地可以正常预览但是打包发布测试后报worker.js404此时需要修改依赖vue-pdf/
使用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,那么在项目根目录创建对应路径的文件夹将文件放进去就可以啦
以上两种方法都实测可行,建议使用第二种。第一种会导致打包文件过大,影响页面加载速度,大家有更好的方法可以讨论哈
更多推荐
所有评论(0)